53 CSS Techniques

“Wow,” is pretty much all I have to say about this. It is quite the list.

Via Daring Fireball.

More CSS Style Tips

I found a couple of more links today to add to yesterday’s CSS Programming Style post.

CSS Programming Style

Here are a couple of interesting articles on programming style in CSS. Both articles advocate putting all of the properties of a selector on the same line:

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

Instead of the conventional method:

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

These authors seem to think that it is actually easier to find the actual property you’re trying to edit in a CSS document if all of the properties for each selector are on one line.

Now, I’ve always written my CSS in the conventional method, but after reading these two articles, it got me thinking. I can’t even begin to describe how many times I’ve sat in front of my computer and scrolled up and down a ridiculously long CSS document looking for some stupid selector. The reality is, you’re never just looking for a property. You’re looking for the property (or properties) of a specific selector. It just makes sense to write your code in a way that would make it easiest to find that selector.

Take this example of some links (code example 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 pleasant to look at. I’m envisioning an entire CSS document 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">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">Broken Kode: CSS File Structure</a></li>