wheresrhys

Every now and then I come across and article where some CSS guru outlines how they structure their stylesheets (main layout elements at the top, all headings together etc.), but I don’t think I’ve ever read any discussion on how to layout the individual elements.

Recently at work somebody, probably thinking they were being helpful, put all my stylesheet selectors in this sort of format

h1
{
   font-size: 2em;
   color: #000088;
}

whereas I much prefer it like this:

h1 {font-size: 2em; color: #000088;}

The reason being that when I’m scanning through a css file I’m generally looking for elements, classes and other selectors, not individual rules. Having each line begining with a selector aids easy scanning. Breaking each selectors rules up into individual lines increases the amount of scrolling you need to do by probaly at least a factor of 5, and decreases the number opf selectors you can see at once – both leading to a lot of time wasted searching for the selector you need to edit.

But everybody apart from me seems to default to the split up style. As far as I can see it’s because in programming a ‘{‘ generally means the potential of nested loops and conditionals, so you need to emphasise the curly bravcket’s depth in the stack. But CSS hardly ever (except for some hacks… which I don’t use) goes beyond one level of curly brackets. So why insist on laying it out that way?