Aloe Studios

Smashing Magazine just put together a nice list of css tips

It’s loaded with some really clever tricks and some solid fundamentals. It got me thinking about something I like to do when coding CSS.

A topic of much debate over the years has been how to organize your css. Really it just comes down to personal preferences, but some approaches work better for me than others. Some recommend to create a separate typography section (which I think is crazy). Some suggest alphabetizing - (I used to do this) which is a technique I’ve found to be useful when searching for a style definition, but sometimes doesn’t make sense.

What I’ve been doing lately is putting my styles in order of appearance on the site. Like any other technique, this has its pros and cons (and is practically impossible on larger projects), but I’ve come to like this method.

What I’ve added on top of that is “child indenting” for nested style definitions:

So this:

div#content{
     width:500px;
     }
div#content p{
     font-size:120%;
     }
div#content p a{
     color:#999;
     }

Becomes this:

div#content{
     width:500px;
     }
     div#content p{
          font-size:120%;
          }
          div#content p a{
               color:#999;
               }

Or view the css file for this blog (not the greatest example of css the world has seen)

This is similar to how you might markup your (X)HTML, and (for me, at least) helps to visually illustrate parent-child relationships (the Cascade) in the css while coding.

For the production version, I usually select “all” and then shift tab so that the indenting is gone. Something tells me that might save an infinitesimally small amount on the file size and/or page load times. But it might be okay to just leave the child indenting there.

It’s a very simple technique - nothing groundbreaking, but I’ve never really seen it discussed before, so I figured I’d bring it up. Surely I can’t be the only person using this method, but as I’ve never seen it around I wanted so badly to come up with some silly acronym like AFCCIM or FoCCIS (Ford FoCCIS?) but I think I’ll stop there.