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

    reset.css    - I use eric meyer's
    elements.css - Global defaults for things like body,
                   h1, h2, h3, p, a, input, strong. All
                   or almost all selectors in here are
                   just tag names.
    layout.css   - Just sets up the global layout with
                   containers: e.g. header, footer, left
                   column, right column.
    blocks.css   - Reusable chunks.

All files get concatenated and minified before serving, obviously.

I utilize mixins heavily so I can modulize all my styling and make sure it's included in areas that are appropriate. I've learned this is the only way to handle CSS without styles getting too complicated and accidentally changing something where you didn't mean to.

Example (create a mixin that has certain styles for forms and then include it in a body.wizard page) this way I keep my CSS very dry.

General coding guidelines are horizontal. I recently switched to this. I used to do vertical and indentation but it's very hard to read with big files. I've found that it's a lot easier to read horizontal CSS.

I alpha all my styles from a-z.

My screen is wide, my editor is wide, my code is fairly wide, but the standard format for CSS is really narrow. Every time I see the vertical format in my editor, easily 80% of the window space is completely empty, and otherwise useless, and 80% of the CSS is not on the screen and I have to page up and down, or search, to find stuff.

This is a workflow optimization that works for me. It might work for others too.

- Almost all CSS goes in 1 big file. One line per selector to keep thinks clean and easy to find. Styles from external sources (like jQuery UI) go in separate files.

- Reset lines go at the top, if you use them, in a / RESET / section.

- Styles for individual HTML tags are next in the / HTML TAGS / section.

- Then a / UTILITY CLASSES / section for clearing floats, etc.

- Next comes site layout. Headers, footers, page width, etc. all go here. Just the layout though - think the grid. No real content styling yet.

- Now sections for each piece in the layout. Content styles go here. First a section for the / HEADER CONTENT /, then a big section for the / PAGE CONTENT / (vast majority of styles go here), then the / FOOTER CONTENT / styles.

http://lanyrd.com/2008/barcamp-london-5/sg/

She splits everything in to general styles (basic HTML elements), helper styles (things like forms, notifications, icons), page structure (header, footer, layout columns etc), page components (reusable composable classes for components that occur on different pages in different combinations, such as a news teaser) and over-rides (special cases for individual pages, rarely used).

She hardly ever uses IDs, preferring classes for almost everything - because CSS written against classes can be used more than once on a page.

She uses CSSEdit's groups feature to make the CSS easier to navigate - it's all in one file. http://macrabbit.com/cssedit/

View the stylesheets on http://lanyrd.com/ and follow the link at the top to the unminified version to see annotated examples.