Format Your CSS

Format Your CSS

For years, I've always formatted my CSS in what I like to think of as the "traditional" manner. Each selector on one line, and each property indented one tab underneath:

#content {
  width: 49em;
  padding: 0 1.5em;
  margin: 0 auto;
  clear: both;
}
#content h2 {
  font-size: 2em;
  height: 1.5em;
  margin-left: 0.75em;
  color: #000;
}
#content h2 a {
  font-weight: normal;
  float: left;
}
#content h3 {
  font-size: 1.25em;
  line-height: 1.2em;
  color: #4d9fdd;
}

Pretty standard stuff. I'd break up sections with big comments, and that made it fairly easy to scan. While this format never caused and problems per se, and it was easy enough to implement, it never seemed completely ideal.

When I started working with Sprokets , the other front-end developer there was using one-line css declarations. This threw me for a loop for a while, but I slowly started liking it better and better.

The method I've finally settled on is based on the one-line approach, but with an extra twist: I indent the declarations based on it's place in the HTML document. For example, take the HTML for this simple page:

<div id="one">
  <p>text</p>
  <p>text</p>
</div>
<div id="two">
  <p>text</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

The CSS to access this code would be like this:

body{ properties; }
  #one{ properties; }
    #one p{ properties; }
  #two{ properties; }
    #two p{ properties; }
    #two ul{ properties; }
      #two ul li{ properties; }

This has worked very well for me so far, and I'm looking forward to trying out on some bigger projects. It allows me to scan through my CSS much more quickly, view comments more easily, and has the added benefit of helping me think through things like descendants and inheritance. Take a look at the CSS for this site to see it in action on a bigger scale.

This method, while new for me, is clearly not revolutionary . However, since I stumbled on it on my own, I thought some of you guys might benefit from it as I have. How do you format your CSS?

Comments (archived for posterity)

  • Joe Dunn commented

    My stylesheet is an organizational disaster right now&#8230this; formatting is sure to help me make future edits. Thanks!

  • elliottcable commented

    Looks like you need to get into SASS (-:

    Here’s the CSS for my site, or at least part of it…

    http://files.elliottcable.name/SASS/compiled/mini.css

    Here’s some of the files that I actually write (they’re parsed into that by my custom rakefile):

    http://files.elliottcable.name/SASS/mini.sass

    http://files.elliottcable.name/SASS/includes/includes.sass

    http://files.elliottcable.name/SASS/includes/unsets.sass

    It’s really a beautiful system. I can’t believe I ever actually bothered to write CSS, having to do so would kill me nowadays >,>

  • Nate Klaiber commented

    I’ve used the same technique on projects in the past. I like the one line simply because it’s less page weight. I would eventually compress the CSS anyway. I have also used a mixture of PHP/CSS - only to compress the output to a CSS file so my development environment could have comments and more spacing, while production was barebones.

    No offense to elliot, but I would avoid SASS like the plague. You know what you are doing with CSS, there is no reason to revert to something like SASS which esentially attempts to make CSS a pseudo programming language - which it isn’t and was never meant to be. Save yourself the overhead of process something as simple as CSS and continue doing it the way you are now. Your website will thank you.

  • Seth commented

    I tend to use something a little different:

    


                #my_id { style }


                #my_id p { style }


                #my_id p.class { style }


                #my_id p a { style }

    This makes finding the code really easy and because it’s done without any additional formatting I can code faster. This may not be a concern for everyone, but I am very limited to the actual amount of coding time alloted.

  • Brad Dielman commented

    Great post, Dan. I still write my CSS in the “traditional” manner, although I may try your new style of mimicking the layout of the HTML document.

    As you pointed out, I can see how it would help when trying to determine inheritance.

  • Fatih HayrioÄŸlu&#8217nun no commented

    [...] CSS yazarken denenebilecek yeni bir format. Bağlantı [...]

  • Armen commented

    Nice one! I might drop the traditional method, and become a new follower of this alternative method. It looks nice, and I think I could edit faster if I adopted it.

    Thanks!

  • Robert Lidberg commented

    We have been using this CSS “layout” for years, always worked like a charm :) In larger projects too.

    If we ever work with someone not used to this format, you can always get the usual format using firebug.

    Best regards,

  • Andy commented

    That’s really interesting, I initially started using one line styles because thats just how I thought it was supposed to be done, when I realised I was ok to use whitespace, I switched to an almost identical style to yourself.

    I had never considered indenting styles to match the code layout. I might give that a go on my next project (although I don’t think I’ll be using one line styles, because I find them a nightmare to read!).

  • Steve commented

    I personally can use either a one-line declaration or multi-line declarations that are tabbed in once. however, I have started writing my style rules in alphabetical order, which actually has saved me a lot of time when going through my stylesheet and doing some edits. I prefer this style though.

    

#wrapper {

  background:#FFF;

  color:#000;

  font:100%/150% “Trebuchet MS”, Verdana, sans-serif;

  margin:0 auto;

  width:90%

}
  • Steve commented

    oops.. didn’t pick up on my whitespace. hahaha, sorry about that.

  • Andreas Lagerkvist commented

    I’ve used the same type of indentation since I read about it on Dustin Diaz’s site a few years back. I agree that it really helps get a better overview of your code.

    In addition to indentation I always structure my CSS modular. Each module on the site gets its own div with a unique ID (#recent-comments for example) and that module also gets a CSS-file (recent-comments.css) where every selector starts with the module-ID (so as not to style anything generic from a module-file).

    I’ve also implemented my own CSS-constant-parser. It’s quite different from what I’ve seen before and I’m currently using it on a very large website where it’s definitely helped keep my HTML as tidy and clutter-free as possible.

    Honestly don’t see the point in SASS. It looks like you need to learn another language all over again for very little benefit and what about portability?

    Ok, to be fair, using my constant-parser has the same drawbacks though.

  • Josh Walsh commented

    I tend to code in the “Traditional” way as well. As you said, it’s definitely not ideal, but works well for me.

    Your tabbed approach is interesting to me, but since I don’t do a whole lot of styling by individual ID’s , rather mostly by more generic class based styles, I think it would be distracting for me.

    I’m going to try using one-line selectors for simpler definitions and keeping to “Traditional” definitions for larger, more structural definitions.

  • Ravi Chopra commented

    Came across this tool today styleneat.com. does that indenting for you automaticcly. pretty neat.