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>

You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.


1. NerdStarGamer » Blog Archive » More CSS Style Tips

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

2. JohnPearson

Nice Post.

That was well said. Always appreciate your indepth views. Keep up the great work!


3. Florian

Hi, I found your blog via google by accident and have to admit that youve a really interesting blog 🙂 Just saved your feed in my reader, have a nice day 🙂

4. Dinesh Karki

helpful tips for me thank’s