Single-Line vrs. Multi-Line CSS

By: Chris Coyier on September 15th, 2007 — Posted in: Opinion

Steve Smith over at Ordered List has an interested article up about how he chooses to format his CSS. Basically there are two ways to go about it, Single-Line and Multi-Line, with Multi-Line being the classic approach:

#wrapper {
    width:800px;
    margin:0 auto;
}

#header {
    height:100px;
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

This is the style that I use and like just fine. Steve’s point is that on large CSS files, the selectors become a more difficult to scan through quickly. So if you keep all of your selectors and their attributes each on a single line, the file becomes a lot easier to browse. Like so:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}

He has a good point, I can see the merits and it’s just a matter of personal preference. However, I think I’m going to stick with the regular method for now. If I really need to find a selector fast I always just do a find anyway. One critic of the style even points out that various CSS debugging tools will alert you to errors by line number and it will be harder to find the error if you are using the Single-Line method. Also, if you are starting to get worried about the browseability of your gigantic CSS file, this could be a symptom of CSS bloat and you might want to consider breaking up that file. I’ll write up an article soon about some different techniques for doing that.

Theoretically Related Articles:

Responses

1

I use both methods. Most of the time I use the spacious one, but on various things (e.g. Link styles) I prefer the short one.

Comment by Michael from Pro Blog Design — September 16, 2007 @ 10:14 am
2

I personally think example one is the best and easiest to scan however example two is smaller in size as it does not use as many space, enter and tabs.

Comment by Jermayn Parker — September 16, 2007 @ 9:30 pm
3

Use multi-line during dev and then condense the code for production. You’ll be surprised how removing the extra white spaces can reduce a file size.

Comment by John Schires — September 19, 2007 @ 6:45 am
4

@John Schires: File size is a good point. If you are aiming at the quickest possible load times, optimizing your CSS can help with that.

Comment by Chris Coyier — September 19, 2007 @ 6:58 am