Obsessive CSS Code Formatting: Indentation and Spacing

Published Sunday, June 1, 2008 @ 2:25 pm • 17 Responses

In the intriguing discussion following the first obsessive CSS formatting article, Jordan Gray brought up the age-old question regarding spacing: tabs or single spaces? I smugly responded that the issue has long-since been resolved, with tabbed spacing as the obvious winner. Let’s take a look at some serious CSS spacing examples..

1) Strictly Single Spacing

Here we have several code blocks showing consistent spacing via single blank space. Three key areas where single spacing is seen in this example: after the selector, and before each property and its corresponding value:

div#example_01 {
 padding: 1px;
 margin: 11px;
 width: 111px;
}
div#example_02 {
 padding: 2px;
 margin: 22px;
 width: 222px;
}
div#example_03 {
 padding: 3px;
 margin: 33px;
 width: 333px;
}

The resulting code is nice, clean, and readable, however, the scene quickly changes when various code blocks are indented:

div#example_01 {
 padding: 1px;
 margin: 11px;
 width: 111px;
}
div#example_02 {
 padding: 2px;
 margin: 22px;
 width: 222px;
}
 div#sub-div_01 {
  padding: 1px;
  margin: 11px;
  width: 111px;
 }
 div#sub-div_02 {
  padding: 2px;
  margin: 22px;
  width: 222px;
 }
 div#sub-div_03 {
  padding: 3px;
  margin: 33px;
  width: 333px;
 }
div#example_03 {
 padding: 3px;
 margin: 33px;
 width: 333px;
}

Yikes! As you can see, the strict single-spacing approach renders code-block indentation practically pointless. The indented code blocks really “blend in” with the surrounding code, making it difficult to quickly identify designated subordinate selectors. Perhaps two or more single spaces would work better?

2) Single Spacing, Tabbed Indents

This method takes advantage of both single spacing and tabbed spacing. Single spaces rest between selector and opening bracket, and also between properties and their values. Tabbed spaces occur before each declaration block, and also before the closing bracket:

div#example_01 {
	padding: 1px;
	margin: 11px;
	width: 111px;
	}
div#example_02 {
	padding: 2px;
	margin: 22px;
	width: 222px;
	}
	div#sub-div_01 {
		padding: 1px;
		margin: 11px;
		width: 111px;
		}
	div#sub-div_02 {
		padding: 2px;
		margin: 22px;
		width: 222px;
		}
	div#sub-div_03 {
		padding: 3px;
		margin: 33px;
		width: 333px;
		}
div#example_03 {
	padding: 3px;
	margin: 33px;
	width: 333px;
	}

To my (admittedly obsessive-compulsive) eye, this method produces the best results. Each block of code is clearly distinguished from the others, and subordinate code blocks are easy to identify. Nice.

3) Minimalist Spacing

Removing all spaces from within each code block is another commonly employed spacing technique. Placement of selectors and declaration blocks on individual lines fosters overall code-block readability while keeping file size to a minimum:

div#example_01{
padding:1px;
margin:11px;
width:111px;
}
div#example_02{
padding:2px;
margin:22px;
width:222px;
}
	div#sub-div_01{
	padding:1px;
	margin:11px;
	width:111px;
	}
	div#sub-div_02{
	padding:2px;
	margin:22px;
	width:222px;
	}
	div#sub-div_03{
	padding:3px;
	margin:33px;
	width:333px;
	}
div#example_03{
padding:3px;
margin:33px;
width:333px;
}

Within this strategy, tabbed indentation of subordinate code blocks greatly facilitates recognition, however, readability of individual declaration blocks (properties and their values) seems tedious at best. Yet, with fewer characters, perhaps this method is a good compromise between optimization and usability.

4) Other Hybrid Spacing Techniques

Here are a few other frequently observed spacing techniques:

a) Single-line code blocks with tabbed subordinates — here, spacing is similar to the single-spacing, tabbed-indents method, only with each code block placed on a single line:

div#example_01 { padding: 1px; margin: 11px; width: 111px; }
div#example_02 { padding: 2px; margin: 22px; width: 222px; }
	div#sub-div_01 { padding: 1px; margin: 11px; width: 111px; }
	div#sub-div_02 { padding: 2px; margin: 22px; width: 222px; }
	div#sub-div_03 { padding: 3px; margin: 33px; width: 333px; }
div#example_03 { padding: 3px; margin: 33px; width: 333px; }

b) Single-line declaration blocks with tabbed subordinates — I haven’t actually seen this method used before, but it sure looks promising. It’s like some quasi single-line, single-spacing/tabbed-indent hybrid (notice the spacing within the declaration blocks):

div#example_01 {
	padding:1px; margin:11px; width:111px; 
	}
div#example_02 {
	padding:2px; margin:22px; width:222px; 
	}
	div#sub-div_01 {
		padding:1px; margin:11px; width:111px; 
		}
	div#sub-div_02 {
		padding:2px; margin:22px; width:222px; 
		}
	div#sub-div_03 {
		padding:3px; margin:33px; width:333px; 
		}
div#example_03 {
	padding:3px; margin:33px; width:333px; 
	}

c) Meta-spacing for columnar organization — or something. Okay, I realize I’m going out on a limb trying to classify and name these different spacing techniques, but it sure is fun! ;) This meta-spacing technique employs inconsistent spacing to organize properties and values into two left-aligned columns:

* {  
	vertical-align: baseline;
	font-family:    inherit;
	font-style:     inherit;
	font-size:      100%;
	border:         none;
	padding:        0;
	margin:         0;
}

Wrap up..

These different spacing and indentation methods are merely a small sampling of the many diverse syntactical formats used in contemporary CSS implementations. One of the great things about writing CSS code is its flexibility and adaptability. Regardless of your specific style of writing CSS, consistency, usability, and practicality are absolutely essential.

Share your thoughts

What is your preferred spacing and/or indentation method? Do you use one of the above methods, or something else? Share your thoughts! ;)

← Previous post • Next post →

« Blacklist Candidate Number 2008-05-31 • WordPress Tip: Quick Hack to Block Spam for the Wordspew Shoutbox Chat Plugin »