Single-line vs multi-line CSS formatting

Question

Though it's debatable, I've heard the majority of CSS developers prefer multi-line because of the ease of which a property can be found within the CSS file. But doesn't this make the CSS file bigger and less readable on the whole? I think single-line lets you scan the CSS file much faster. Any thoughts?

Answer 1

This is a matter of personal style - make sure whatever you choose that you are consistent. I personally tend to put each property on its own line for readability.

Answer 2

Use whatever style you find easy, at the time of development.

You can use a CSS minifier to reduce the size of the file at the time of deployment. You can find a lot of CSS minifiers which will help reducing the file size.

YUI compressor is a good one.

Answer 3

Just like JavaScript code, you would want to format your CSS the way that would conform to your team's standard, and let the compressor minifies it for deployment.

Answer 4

IMO multi-line CSS is better because its more readable. But i would suggest you to follow your teams's standard and dont waste your time debating :)

And if you are worried about CSS file size, then you should minify / compress it.

Also, if you have time, you spend some on validating your CSS using Official W3C CSS Test Suites.

Answer 5

It's all a matter of preference based on what your team decides on. However, here's my take on why I use single-line formatting:

When I need to maintain CSS, I'm most often looking to modify an existing selector. If the start of every line is a new selector, and not just more style declarations, it makes it easier to scan the document for the selector I want to find. It also means less scrolling to find what I need.

Once I've found the selector I need to edit, good syntax highlighting makes it easy to read the rules for a specific selector, so I don't lose any readability by having all of my style declarations on a single line.

That being said, I wouldn't say it helps with file size any. I rely on YUI Compressor to compress my CSS for me automatically, rather than trying to manually maintain an efficiently declared style document.