Formatting CSS

CSS may be formatted in a number of ways and all of them seem to have their problems. So what is the best way to format CSS? First let's go through each way formatting CSS is done.

The most popular way is to have a style on each line:

#some_div { border: 1px solid #111111; background: #eeeeee; padding: 5px; } #another_div { height: 34px; width: 52px; font-weight: bold; font-size: 1.2em; }

Very messy deskThe biggest problem with the above format is that the CSS files become large, usually a few hundred lines, if not more. Scrolling up and down in the CSS file is a pain. You could do a quick search for class and id names instead, but this also can become annoying. The benefit of the above approach is that it is the easiest to read.

An alternative approach is to lay the styles all along 1 line:

#some_div { border:1px solid #111111; background:#eeeeee; padding:5px; } #another_div { height:34px; width:52px; font-weight:bold; font-size:1.2em; }

This rectifies the scrolling problem but creates another. The styles are hard to read. Skimming over each line will not help you out and you become annoyed once more. The above CSS formatting should be avoided as it can cause problems for users later on. A better approach is to sort the declarations alphabetically.

#some_div { background:#eeeeee; border:1px solid #1111111; padding:5px; } #another_div { font-size:1.2em; font-weight:bold; height:34px; width:52px; }

Placing our styles in alphabetical order makes our CSS a little bit easier to read. After using the formatting above, after a day or two of reading styles in that order you will skim over your formatted CSS and find what you need very quickly. Each time I add or edit a style, my eyes move to the correct place each time.

So back to the original question of what is the best way to format our CSS? The answer is to use both. Our default style sheets should be formatted in alphabetical order and also save room by doing it over single lines. Please note this is not a reset style sheet which should be avoided.

h1 { color:#5c191f; font-size:28px; font-weight:normal; line-height:1.2em; padding:0; margin:0 0 1.5em 0; } h2 { color:#5c191f; font-size:20px; font-weight:normal; line-height:1.2em; padding:0; margin:0 0 1.5em 0; } h3 { color:#5c191f; font-size:16px; font-weight:normal; line-height:1.2em; padding:0; margin:0 0 0.5em 0; } h4 { color:#2d4353; font-size:14px; font-weight:normal; line-height:1.2em; padding:0; margin:0 0 0.5em 0; } h6 { color:#E45959; font-size:13px; font-weight:normal; line-height:1.2em; padding:0; margin:0 0 0.5em 0; }

Once we have all our default styles set, we should create modules. Each part of our website should be split up into a reusable modules. Each module should have its own CSS style sheet in which we can limit the amount of overall lines in the file, which therefore eliminates scrolling:

.breadcrumbs { background: #dfdfdf; border: 1px solid #bdbdbd; margin: 0 0 35px 0; padding: 5px 20px 7px 13px; } .breadcrumbs a { border-bottom: 0; color: #5c191f; text-decoration: underline; } .breadcrumbs a:hover { border-bottom: 0; color: #5c191f; text-decoration: underline; } .breadcrumbs span { color: #7a6262; } .breadcrumbs .separator { padding: 0 3px; }

Therefore the best way to format our CSS is to use both methods. Alphabetically place declarations on single lines for our initial styles and to separate the rest of our styles into modules to eliminate the scrolling problem.