Simon Willison’s Weblog

Maintainability, a.k.a. the CSS elephant

Now that even Slashdot has made the move to CSS it’s safe to say that the CSS advocacy battle is slowly being won. It’s time to talk about the elephant in the corner of the room: stylesheet maintainability.

The C in CSS stands for the Cascade—a complex but elegant set of rules governing which style rule has precedence in cases of conflict. Consider the following:

* { color: black; }
h2 { color: red; }
div#header h2 { color: green; }
h2.funky { color: orange; }

An h2 with class “funky” inside a div with id “header” matches all of the above rules—it’s up to the cascade to pick the most specific one. While the key element of this process is calculating specificity a number of other differences such as @import v.s. linked stylesheets also plays a part.

There’s one big problem: if you see an h2 in the source code, you need to have a pretty intimate knowledge of the stylesheets being applied (not to mention the cascade rules governing them) to work out which rules are in effect. It’s a far sight trickier than deciphering <font size="3" color="red">. If a page element isn’t displaying the way you want it to, tracking down the cause can be a nightmare.

What’s needed is a well understood set of techniques for writing maintainable stylesheets. I’m interested in collecting advice on this, especially from people who have tackled this problem in a situation where more than one person has to work on the same CSS code. I’m particularly interested in ideas on how to best split up a large set of rules over multiple stylesheets. If you have any tips, please post a comment, write it up on your own site, e-mail me or add it to the wiki page.