Grow your CSS skills. Land your dream job.

Single-Line vrs. Multi-Line CSS

Published by Chris Coyier

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.

Comments

  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. :)

  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.

  3. John Schires
    Permalink to comment#

    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.

  4. Permalink to comment#

    @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.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".