Ask HN: Anyone have a really smart way to organize css?

I'm hoping for some good answers here, because I'd love a better way.

I always put universal elements first (body, img, @font-face, etc.), then I just organize it top to bottom by page location (i.e. header, content, sidebar, footer, etc.). I also tab-indent so that elements within another are indented and "contained" underneath, making it easy for me to move from one section to the next. I also write the CSS horizontally, only making a new line for a new element.

I should also note that I'm a n00b :-), so this could be a horrible way to do it.

Slightly related, but mainly a formatting issue, I format my css files as such:

  .foo    { x: y; a: b }
  .bar    { m: n }
  .baz    { background: blah blah url(xyz.png) top left;
            x: y; i: j; }

instead of the more commonly seen:

  .foo {
    x: y;
    a: b;
  }

  .bar {
    m: n
  }

  .baz { 
    background: blah blah url(xyz.png) top left;
    x: y; 
    i: j; 
  }

My format takes up less vertical space in the editor. Sometimes, I can get my entire CSS file into a single page on the screen, reducing the amount of time I spend scrolling and searching. I do split lines when they go off the edge of the space, as seen in the .baz example.

I do it more or less the same way, except I try to separate the layout from its content (I'll put #header, #content, #sidebar, #footer together, and later on define stuff that is specific to the content of e.g. #header).

Also, when having quite a few properties for a selector, it's quite difficult to read when all is on one long line, so I use new lines for each property.

I haven't used it, as there just hasn't been a project with enough lead time to experiment with something lately, but I'm fond of the idea of code generators for CSS, like CleverCSS for Python and Sass for Ruby.

Other than that, the best advice I can offer that I DO follow is that I group all HTML elements together, all IDs together, and then all classes together. Within each of those groupings, everything is in alphabetical order.

  body { foo: bar; }
  form { foo: bar; }
  h1, h2, h3 { foo: bar; }
  input { foo: bar; }
  p { foo: bar; }

  #container {}
  #footer {}
  #nav {}

  .etc {}
  .even {}
  .odd {}

and so forth.

I prefer the latter. It's more readable IMO. If file size is an issue, I just use a CSS compressor. Also, it's not too hard in finding selectors, most IDE's or text editors have a "Find" command to locate a selector. That's my 2 cents.