What’s up with your CSS?

Donald — Fri, 09 May 2008 18:22:34 +0000

We’ve been talking for a long time about (and more recently getting to work on) documenting some of White Whale’s best practices. It just seems like good stuff to have written down—and one day maybe share—but more importantly, as we slowly grow we’ll have a reference guide for anything from variable naming conventions to our preferred image replacement technique.

One of the things that’s been part of White Whale canon for some time is writing CSS declarations in a single-line format, with indents for parent-child relationships. From a current project:

#events { float:left; width:200px; padding:20px; background:#444 url(/images/background_events.png) repeat-x center top; color:#fff; }
    #events h3 { margin-bottom:0.5em; }
    #events .date { font-weight:bold; }

It took a bit of time to get used to at first (the practice comes to White Whale from frequent White Whale collaborator Jesse) but, since then, scanning long bits of code written the old way feels clunky.

I recently skimmed an article that briefly mentioned this coding style with the caveat that it “might produce messy results if you define more than 3 attributes for a given selector.” And we’ve had clients who objected on similar grounds. But I actually find that the opposite is true: longer lists of attributes actually hurt scannability more in the conventional style. The list of selectors is where hierarchy matters and where the cascade happens, and has orders-of-magnitude more elements than your average attributes-per-selector. Single-line declarations is may feel cluttered for those four or five attributes, but the organizational structure and lookup-speed benefits pay off where it really counts.

Chapter 42 » Best Practices

What’s up with your CSS?