Latest TweetsVerify any search engine or visitor via CLI Forward-Reverse Lookup perishablepress.com/cli-forwar…
Perishable Press

Obsessive CSS Code Formatting: Indentation and Spacing

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! ;)

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
12 responses
  1. Dennison Uy June 1, 2008 @ 9:23 pm

    I personally use and prefer single line code blocks. The primary benefit is that I do not have to scroll too much to find what I am looking for and second, arranging all my declarations on one line allows me to quickly sort through and find the relevant ID / class / element that I need to work on.

  2. web design company June 2, 2008 @ 2:59 am

    Great tut’s as always. Enjoyable too.

  3. Jeff Starr

    Hey Dennison :) Do you use tabs (indentation) to distinguish subordinate selectors? What about the spacing within the code blocks? And, within each declaration block, are you using single spaces between items (brackets, properties, values, etc.), or maybe something else (or not at all)? A million questions, I know, but inquiring minds want to know! ;)

  4. Interesting article; I never gave my own obsession too much thought until now — I guess I am a bit of a hybrid, what I do is with short styles is post as a single line with single space between brackets, and for styles with several lines I sort of single-space things, but then I tab out the styles in between. Make sense?

  5. Jeff Starr

    Yeah, that sounds like a great approach! Seems like a hybrid of method #2 and #4a. I also keep short blocks on a single line, and then tend to use them as meta-punctuation throughout the document to further organize things. I think tabbing the individual declaration blocks is much better than not spacing them or single spacing them. Thanks for the comment, Eric!

  6. Niels Bom June 20, 2008 @ 10:06 am

    I think I prefer laying out my css with the opening curly brace on a new line, on the same column as the closing brace.
    (although I must say this looks better in languages where things are truly nested)

    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;
    }

    Like this.

  7. Jeff Starr

    Yes, I do like that technique as well, although I am hesitant to use it for CSS. As you say, it works great for formatting programming languages that are logically nested, such as PHP, Perl, and so on. With CSS, this method does help with readability, but there is an additional amount of scrolling involved due to the extra lines required for the opening bracket. Not a huge deal, of course, especially for less-extensive stylesheets. I know that this is a very popular formatting method, but I still find all of the “floating” brackets a bit distracting! ;)

  8. This is a great little series of articles about CSS organisation!

    If you use TextMate you might be interested in my short article about single line formatting with TextMate. This uses code folding in the text editor to achieve the benefits of single line code blocks without sacrificing the legibility of multiline blocks.

  9. SneakyWho_am_i September 26, 2008 @ 2:15 pm

    Mine is very close to 4a with just a touch of 4b at the moment. No tabs though. I have my text editor set to override tabs with 4 spaces, but I don’t ever press the button in css.

  10. I like this method but how do you handle the indentation of items with multiple subordinate selectors? For example:

    .class {
    width:2020px;
    position:relative;
    }

    .classA {
    width:1347px;
    position:relative;
    }

    .classB {
    width:674px;
    position:relative;
    }

           .class .sub,.classA .sub, .classB .sub {
           position:relative;
           float:left;
           width:642px;
           height:532px;
           padding:9px 21px 42px 10px;
           }

    How could I more clearly illustrate that this subordinate group of selectors applies to all three selectors above and not just .classB. Obviously the selectors tell me what they do but I’m curious how others might approach this with indentation or comments.

  11. Jeff Starr

    Hi Tal, that is an interesting question. The way I handle such declarations is to place the grouped selectors first, and then indent each of the individual selector’s declaration blocks. For example:

    selector-01, selector-02 {
           padding: 10px;
           margin: 10px;
           border: 10px;
           }
           selector-01 .subClass-01 {
                  padding: 10px;
                  margin: 10px;
                  border: 10px;
                  }
           selector-02 .subClass-02 {
                  padding: 10px;
                  margin: 10px;
                  border: 10px;
                  }

    ..of course, each of the individual selectors would have their own unique set of declarations. This method works for me and helps organize even the most convoluted stylesheets. ;)

  12. Saddam Azad April 30, 2009 @ 7:06 pm

    Great writeup on the different kinds of spacing and formatting of CSS. I prefer the Single Spacing, Tabbed Indents method. I wrote a post on how to craft beautiful stylesheets a few days ago which advocates this method.

    Cheers.

[ Comments are closed for this post ]