Friday, September 29, 2006

How To Architect Your CSS

We all have our own favourite strategies for architecting our application code, but CSS is often one of the aspects of a site that gets copmletely overlooked. As CSS - along with its browser support - matures and grows more powerful, how we structure our CSS becomes more and more important for maintainability and expansibility1 of our applications.

I'm sure we've all experienced it - you start out with a prototype with a few simple CSS rules and the best of intentions, but as your application grows and changes, and more and more people have their input into the design process, the CSS grows and morphs and accumulates more and more quick fixes and cheesey hacks. Months later, you realise you've got to the point where something as simple as "can we make the comments link appear in red?" can take hours of navigating the jungle of interfering specificities and ids. Eventually you admit defeat, and put in a cheesey hack "just this once", and mentally promise to go back and fix it properly later - but somehow you never get round to it, and the process continues.

Digital Web has an interesting, if short, article on Architecting CSS, with some useful tips. If I had to pick two simple things that you should do RIGHT NOW, DAMMIT if you're not already, it would be :

  • Commenting your rules just as much as your code, and
  • Alphabetically sorting your attributes.

Oh, and avoiding the !important hack if at all possible.

Alright, three simple things....2 You get the idea :)

1 - apologies for grimace-inducing linguistic contortions. It's Friday, it's early, and I haven't had coffee yet. Bleh.
2 - No-one expects the Spanish blog post!


Martin said...

Never thought of sorting attributes alphabetically. That's an excellent tip.

Ben Nadel said...

I do the alpha sort on attributes (otherwise I can't read them... I have mental problems)... but I certianly need to comment better.

Nice post.

Nathan Strutz said...

Is !Important; really a hack if it's built into the language? I mean, really, that's what it's there for.

Alistair Davidson said...


I'd certainly class !important as bad practise, even though it is perfectly allowable in the language - along the same kind of lines as GOTO, using exceptions for flow of control, and mixing database queries in amongst your display code. You can do it, sure, but it's probably going to create real maintenance headaches down the line.

Mike Stenhouse said...

Bit late but just going through my feeds! I wrote up something similar a while back but aimed at coding CSS in a team environment. It was largely based on how badly we did it on years and years ago! Roger Johansson has done some work on this too but I don't think he's published it yet...