Single-Line vrs. Multi-Line CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Steve Smith over at Ordered List has an interesting 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.