httpwebwitch - 1:21 pm on Jun 13, 2009 (gmt 0)

As mentioned, there is no right way, only a sensible style. Here's what I prefer:

CSS rules are put in this order:

1) CSS "reset" or super-global stylings. One that I'll do right at the top is:

*{font-family:tahoma}

2) base element selectors, like a, a:hover, img, p, h1, h2, etc. Also any other "reset" kinds of global stylings. They go at the top too.

3) styles grouped according to the feature they apply to, especially if they're subselections inside a container element like this

#navbar .tab{...} #navbar .separator{...} #navbar .secondary{...}

I'll put a couple of extra line breaks between these sections, and sometimes a comment if that breaks the page visually

As for indentation style, I mix it up:
a) if it's one selector and one rule, I'll leave them on one line:

a:hover{color:red;}

b) if it's one selector, many lines, I'll break and indent:

a.tab{ . color:red; . background:yellow; . border:1px solid blue; }

dots added to preserve spacing

Other tips:
- using sprites is awesome. Do it whenever you can.
- in a surprising number of situations, a background image on an element is more flexible than using an <img> in the markup
- a well-styled border-bottom can be more pleasing than styling an <hr>
- CSS shorthand notations are next to godliness

And... when you're all finished, keep your human-readable copy in development, but run your CSS through a minifier to squash out all the whitespace and comments before putting the file on the server.