Rob Wilkerson

In the course of catching up on some (very) neglected reading, I ran across a fantastic article by Jina Bolton about how to engineer a stylesheet. Well, her title is Creating Sexy Stylesheets, but I don't like that title. That might be the only think I don't like about the article. In my mind, the title itself is too whimsical - or maybe titillating - and masks the importance of what she's espousing. In the article, she ticks off ten tips for engineering a, um, sexy stylesheet. I really like and agree with what she's saying, but thought I'd add a few of my own thoughts to what she's offering.

01. Keep CSS out of the markup.

Oh, dear God, yes. Yes, yes, yes. For exactly the reasons she gives, yes. If you're serious about this web design|development stuff, treat this as a commandment. This is not optional or discretionary in any way.

02. Semantics is not just a buzz word.

See my response to item 01. Double it. Multiple the product by a factor of 27.

04. Know when to use conditional comments or hacks.

Better yet, don't use them. The hacks, I mean, not the conditional comments. If you must use them (and dammit, we all know we must from time to time), though, at least sequester them in the isolation ward of an IE-only style sheet. Today it's one small(-ish) hack, tomorrow it's 19. If you're working in a team of 3-5 people all updating stylesheets it'll be more like 52. Accept - and learn to love - the small inefficiency you're going to introduce. It won't hurt much now and over the life of your style sheet, you'll be much happier, I think.

05. Organizing selectors and declarations.

I organize my stylesheets a little differently. I tend to organize my selectors according to the markup so I can nicely indent descendant selectors. Organizing things that way helps me more clearly draw the mental map between my markup and my styles.

My declarations, I choose to order alphabetically. I've known the alphabet since I was, like, 5 and it hasn't changed even a little bit in all that time. Organizing the way Jina does is just too confusing for my tastes. I can never remember the "proper" grouping of declarations and any "personalized" grouping of declarations just seems - and is - too arbitrary for my tastes.

The alphabet is, in my experience, reasonably stable and accessible. It's even got a nice little melody, if I get confused about whether "J" comes before "L". I think I'll just stick to that for now.

07. Balance readability and optimization.

Agree completely. But err on the side of readability. Assuming your site or application is going to evolve over a span of time measured in months or years rather than minutes and you're not working in some insane, performance-is-everything shop, prefer readability over performance. Certainly there's a balance, but never lose sight of the fact that readability is the key to cheap, timely and easy maintenance.

About Tips 03, 06, 08, 09 & 10

Everything else she writes is, as my grandmother used to say, just good sense and I agree with it just the right amount. Which is to say, I disagree with nothing and have nothing to add.

All in all, a great article that's well worth a read.