Spot on with maintainability trumping file size – if that’s an issue I reckon you should run a minifier on release, leaving your dev files nice and maintainable.

Also, from the comments, I would replace:

border: 1px solid red;

with:

outline: red solid thin;

as outline doesn’t take up space in the box model. Compensating for the temporary border on fixed width/height elements kept nagging me ’til I started using different background colors (waaay too much hassle) and finally settled on outline.

For commenting, I normally sort my CSS based on cascades and the order it appears on the page. I use Comments before each area of the page (ie. /* Navigation */, /* Footer */, etc).

When I get around to implementing some kind of live css parsing thing, so I can automate development > production code form, I’ll add a rule to remove the last semicolons.

In my opinion, closing brace on the last line just adds an extra step if you add something in later that comes after (alphabetically) everything that was already there.

Other than that, I use all the other techniques PLUS indenting my rules so they all line up as well.

This is the only formatter that does the trick for me, actually: http://www.lonniebest.com/FormatCSS

All the others are a bit less detailed. I’d like to find one that did all the things this one does, but that would keep the comments in though.

When the selector is small, and has few properties, everything goes into one line. For example:

h1 { color:red; } h2 { color:blue; } h3 { color:green; }