Abstraction away from CSS

What I found works best is to really learn CSS. I mean really learn CSS.

It can be a confusing language to learn, but if you read enough about it and practice, eventually you'll learn the best way to do things.

The key is to do it enough that it comes natural. CSS can be very elegant if you know what you want to do before you start and you have enough experience to do it.

Granted, it is also a major PITA to do sometimes, but even cross-browser issues aren't so bad if you really practice at it and learn what works and what doesn't, and how to get around problems.

All it takes is practice and in time you can become good at it.


If by some chance you happen to be using Ruby, there's Sass. It supports hierarchical selectors (using indentation to establish hierarchies), among other things, which makes life easier to an extend from a syntactical perspective (you repeat yourself a lot less).

I am certainly with you, though. While I would consider myself a small-time CSS expert, I think it would be nice if there were tools for CSS like there are with Javascript (Prototype, JQuery, etc.). You tell the tool what you want, and it handles the browser inconsistencies behind-the-scenes. That would be ideal, methinks.


You can always use a template engine to add variables and calculated fields to your CSS files.


This elaborates on my previous answer.

When I first started using CSS I also thought it was a pain that it didn't support variables, expressions, etc. But as I started to use it more and more, I developed a different style to overcome these issues.

For example, instead of this:

a { color: red }
.entry { color: red }
h1 { color: red }

You can do:

a, .entry, h1 { color: red }

You can keep the color declared in one spot by doing this.

Once you use CSS enough you should be able to overcome most browser inconsistencies easily. If you find that you need to use a CSS hack there is probably a better way to do it.