Here are a couple of inter­est­ing arti­cles on pro­gram­ming style in CSS. Both arti­cles advo­cate putting all of the prop­er­ties of a selec­tor on the same line:

h2 {font-size: 18px; font-weight: bold; line-height: 120%;}

Instead of the con­ven­tional method:

h2 {
  font-size: 18px;
  font-weight: bold;
  line-height: 120%;
}

These authors seem to think that it is actu­ally easier to find the actual prop­erty you’re trying to edit in a CSS doc­u­ment if all of the prop­er­ties for each selec­tor are on one line.

Now, I’ve always writ­ten my CSS in the con­ven­tional method, but after read­ing these two arti­cles, it got me think­ing. I can’t even begin to describe how many times I’ve sat in front of my com­puter and scrolled up and down a ridicu­lously long CSS doc­u­ment look­ing for some stupid selec­tor. The real­ity is, you’re never just look­ing for a prop­erty. You’re look­ing for the prop­erty (or prop­er­ties) of a spe­cific selec­tor. It just makes sense to write your code in a way that would make it eas­i­est to find that selector.

Take this exam­ple of some links (code exam­ple from Monday by Noon):

/* LINKS */
a { text-decoration:none; color:#00f; }
a:hover { text-decoration:underline; }
a:active { color:#f00; }
a:visited { color:#ccc; }

Now, I think that’s just plain pleas­ant to look at. I’m envi­sion­ing an entire CSS doc­u­ment in short blocks just like this that are really easy to see. I just think I might have to try this out.

<ul class="articleLink">
    <li><a href="http://mondaybynoon.com/2006/02/19/write-better-css/" title="Monday by Noon: Write Better CSS" onclick="javascript:pageTracker._trackPageview ('/outbound/mondaybynoon.com');">Monday by Noon: Write Better CSS</a></li>
    <li><a href="http://www.brokenkode.com/archives/css-file-structure/" title="Broken Kode: CSS File Structure" onclick="javascript:pageTracker._trackPageview ('/outbound/www.brokenkode.com');">Broken Kode: CSS File Structure</a></li>
</ul>