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

I do it too and for the same reasons. Just easier to keep your head around if you can see and scan more of the file at once. I tend to list properties with the most crucial to layout first so it's easy to find major problems (e.g., float, etc).

We had a GUI 'designer' who did the exact same thing to our whole site. Spent ages trying to get stuff to work... :)

I can't recommend Compass/Sass highly enough. A CSS pre-processor will completely free you to organize your CSS however you want, and more importantly, it lets you build up a library of common components (forms, buttons, etc.) that you can easily reuse and adapt for new projects.

Generally, these library files will simply contain mixins (reusable chunks of code), so they don't output anything directly into your CSS, but allow you to include the mixins in certain styles. Very useful for adding effects, rounded corners, etc. on different elements.

Keep in mind however, that mixins can be overused, adding bloat to your code. CSS does cascade, after all. You should always look to see if you can separate reusable css rules to include in markup (commonly seen with grid systems). How you balance out the convenience of keeping your css flexible vs. not littering your markup with lots of styles really depends on the project, but it's something to think about.

I have developed one very useful trick while using Sass for managing colors. Instead of assigning colors directly to an element (very hard to track down later if a change is necessary), I create color variables named after the element and attribute in question. Then in my colors.scss file, I build up my color palette, and after, list all the color variables I created in my stylesheets, setting their values to the appropriate color from the palette (with tweaks, if necessary).

  // in colors.scss ---

  // color palette 
  $red: #ff0000;
  
  // assign colors to elements
  $body-background-color: $red;

  // in layout.css, for example ---

  body {
    background-color: $body-background-color;
  }

Since Sass lends itself to lots of files, keeping all my colors and the elements they are assigned to together in one file makes them much easier to manage down the road.

I also use Sass and Compass. I generally organize the directory roughly like this for projects without a separate designer:

    stylesheets
      - ie.sass
      - master.sass
      patials
        - _base.sass
        - _forms.sass
      utilities
        - _custom_mixins.sass
      vendor
        - _facebox.scss
        

The files with leading underscores are partials which are included in the master.sass. Note that facebox is an scss file. I just dump the CSS in it and include the partial in master.

The nice thing about sass is that it you can change output format, so you can just include all the external CSS files as partials and automatically output a single compressed files with your entire CSS.

When I work with a designer who uses CSS I use a structure like this:

    stylesheets
      - master.sass
      partials
        - _style.scss
      vendor
        - _facebox.sass

In this case, the designer's CSS is dumped in the _style.scss partial, then included in master.sass. Then in master.sass I include my modifications to the designer stylesheets. That way I can leave the designer-provided CSS largely untouched and still have all the flexibility and power of Sass.

Another problem with IDs is that they make the "point system" in selectors much more complicated than if you only use classes and elements.