Obsessive CSS Code Formatting: Indentation and Spacing

12 responses to “Obsessive CSS Code Formatting: Indentation and Spacing”

1. 

   Dennison Uy 2008/06/01 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 2008/06/02 2:59 am

   Great tut’s as always. Enjoyable too.

3. 

   Perishable 2008/06/02 10:08 am • Post Author

   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. 

   Eric 2008/06/10 5:30 am

   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. 

   Perishable 2008/06/10 10:24 am • Post Author

   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 2008/06/20 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. 

   Perishable 2008/06/23 3:10 pm • Post Author

   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. 

   Brook 2008/07/16 8:54 am

   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.

   * 404 link removed 2022/06/05

9. 

   SneakyWho_am_i 2008/09/26 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. 

    Tal 2009/01/02 8:33 am

    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 2009/01/02 5:07 pm • Post Author

    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 2009/04/30 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. Something to add? Let me know.