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

11 Comment(s) | Posted October 10, 2008 by Joel Sutherland |

Joel Sutherland

Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.

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.