Multi Vs Single Line CSS

April 23, 2012

Aha, that old chestnut! I was recently tasked with writing down my preferred choice of multi-line or single line CSS declarations for an upcoming Coding Standards document at work and I thought I would share some of my pointers with the rest of you!

I have developed many sites in the past using both single and multi-line CSS declarations, but I think the benefits of multi line over single line CSS are greater for the following reasons:-

1. I find multi-line CSS to be easier to read, this is obviously my personal preference and seems to be the biggest argument for and against the two types of formatting.

2. Tools such as Firebug/Element Inspector format CSS in a multi-line format as do other programmes and so could be classed as the more common/familiar way to code for both us and newcomers/freelancers.

3. When we use source control, it is much easier to find differences in multi-line CSS where as one line CSS puts all declarations together and so you have to manually look through the line to see which part of the CSS has affected your website.

4. With the now common occurrence of browser prefixes for new technologies in CSS such as border-radius and Webkit-border-radius; having all the prefixes on one line could be classed as messy.

5. I personally try and have important declarations such as width and height first in my multi-line CSS, when putting all declarations on one line it can be fiddly to move things around and to see where one declaration ends and another one starts.

6.Single line CSS can look messy when there are so many properties that it runs on to multiple lines.

Obviously this is just my opinion and there are arguments for why single line declarations are better, what is your opinion? Is there anything you would add to this list?

EDIT: My friend Griff wanted to add this to the list:

7. By using an editor which supports code folding (such as Notepad++) you can have the best of both worlds. i.e. one declaration per line OR multi-line declarations.