Blog

Click Me!

Single-Line vs. Multi-Line CSS: A Tool to End the Debate

By Joel Sutherland Posted

Quicklink: Open up the css style converter here.

An interesting divide exists among web designers, one that is rarely commented on. When coding CSS, do you put your properties on a single line or across multiple lines? If you don't know what the difference is, here is a quick example:

Multi-Line

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

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

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

#feature .link {
width:195px; 
display:inline; 
margin:0 10px 0 0;
float:right;
}

Single Line

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

The benefits to selecting one over the other may not be immediately obvious. Generally when writing code of any kind, it is best to optimize your code for readability as opposed to writing speed. This makes your code more understandable to others (and yourself) when reviewed. CSS is no different.

Which method is more readable?

The answer is that it depends. When using the more popular multi-line format, it is much easier to find individual properties. This is especially true when you stick to a declaration ordering convention. Using the single-line format, it is much easier to find selectors as your file is much more vertically compact. I prefer the single-line format as I can return to a stylesheet in the future and quickly figure out where to make changes. You can look at the selectors quickly to understand the structure of your document.

Obviously there are a number of varying opinions on the subject. Here is a list of links to people arguing for one format or another:

If you and your collaborators can't decide on a common style, I've got a tool to make your life a lot easier. It parses and converts css files between the two formats. It isn't a CSS Compressor, instead it is designed to make your life easier if you write css. Try it out and let me know if you think it needs any tweaks in the comments.

Open up the css style converter.

Comments

  1. Zachary Danger's avatar
    Zachary Danger
    Permalink

    Multi-line wins hands down if you use any sort of source control and need to diff between revisions. Using the single line method makes it nearly impossible.

  2. Antonio Wells's avatar
    Antonio Wells
    Permalink

    Thanks for the tool. Great for conforming between the two CSS writing methods.

  3. Potherca's avatar
    Potherca
    Permalink

    Nice write-up! I'll take a look at the (what looks like a very usefull) tool later... *bookmark* :-)

  4. Nathan's avatar
    Nathan
    Permalink

    Your Cleanup CSS script is the only one I have found so far that indents the opening { correctly. Nice job.

    Would you mind sharing your code? I'm trying to get textmate to be able to do this with a macro.

    The one tweak I'd like to see is adding a newline after commas.

  5. Joel Sutherland's avatar
    Joel Sutherland
    Permalink

    Nathan,

    You can download a zip of the project here:

    http://www.newmediacampaigns.com/files/posts/css-formatting/clean.zip

    If you get textmate to do this be sure to let me know. That would be AWESOME.

  6. Nathan's avatar
    Nathan
    Permalink

    I got something that seems to be working. It is a custom command for textmate that requires csstidy to be installed on your mac and a csstidy template (based on your template2).

    This is what I used to install csstidy: http://thingsilearned.com/2009/01/02/installing-csstidy-and-scons-on-os-x-or-linux/

    (Note: I'm on snow leopard and when installing scons i did not use the --standard-lib flag and that is the only way i got it to work)

    E-Mail me and I'll give you what I have done so far. You're welcome to post it on your site from there.

  7. imaginary adam's avatar
    imaginary adam
    Permalink

    I prefer multi line for editing and a mixture of memcache and minify for the rendered site content. Get the best of both worlds at all times. On the fly minification is always best. Cleanup is intended for performance gain, minification is intended for ultimate condensed performance.

    Now what would be really handy is a script that does on the fly minification as well as reduction, removing css that is simply not used in a rendered page/content layout.

  8. Mark's avatar
    Mark
    Permalink

    @Joel

    RE: "If you get textmate to do this be sure to let me know. That would be AWESOME."

    You're post gives TextMate the macro to convert between single-line and multi-line CSS.

    http://superfluousbanter.org/archives/2008/08/regex-patterns-for-single-line-css/

  9. steve's avatar
    steve
    Permalink

    I do like single line css for somethings, through do find if you get a lot of elements set at once, prefer multiple lines

  10. Ivan's avatar
    Ivan
    Permalink

    Before putting CSS into production, I run it through an optimizer, which groups properties, and then through my own CSS flattener which formats the CSS in one line: http://imsky.org/app/cssflattener

    Great to see other tools like this exist.

  11. Joel Sutherland's avatar
    Joel Sutherland
    Permalink

    Ivan -- that is a great thing to do.

    The purpose of this tool is to organize the code as a development preference prior to doing that.

Leave a Comment