CODEWITHSUNDEEP
csscoding-style
pixeltocode
pixeltocode

Reputation: 5308

Single-line vs multi-line CSS formatting

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?

Upvotes: 1

Views: 3018

Answers (5)

N 1.1
N 1.1

Reputation: 12524

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.

Upvotes: 8

Dan Herbert
Dan Herbert

Reputation: 103407

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.

Upvotes: 8

Kevin Le - Khnle
Kevin Le - Khnle

Reputation: 10857

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.

Upvotes: 0

rahul
rahul

Reputation: 187030

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.

Upvotes: 1

Andrew Hare
Andrew Hare

Reputation: 351516

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.

Upvotes: 1

Related Questions