Blog

Where we discuss our work, thoughts, and process

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

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:

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.

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

03.16.2010

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.

04.24.2010

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.

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

04.27.2010

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.

06.08.2010

Joel Sutherland

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.

06.08.2010

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!
03.07.2012