Blog

Where we discuss our work, thoughts, and process

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

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

 Zachary Danger's avatar
Zachary Danger

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.

Antonio Wells's avatar
Antonio Wells

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

 Potherca's avatar
Potherca

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

Nathan's avatar
Nathan NMC team member

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.

Joel Sutherland's avatar
Joel Sutherland NMC team member

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.

Nathan's avatar
Nathan NMC team member

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.

imaginary adam's avatar
imaginary adam

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.

Mark's avatar
Mark

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

steve's avatar
steve

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

Ivan's avatar
Ivan

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.

Joel Sutherland's avatar
Joel Sutherland NMC team member

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.

alex's avatar
alex
Hi joel,
really interestedd to stumble upon this post. However, its possible your site is a little out of date? You seem to be missing the rest of the cssTidy libraries now....I tried using your clean.php script with the current cssTidy repo, but the output is a mess. Any chance you can repair the link to your project zip, 'twould be greatly appreciated!
alex's avatar
alex
oops, a little guesswork, and I'm getting your zip now via this address:
http://files.www.newmediacampaigns.com/posts/css-formatting/clean.zip

Leave a comment