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

I just use Blueprint.

Suprised no-one has mentioned Nicole Sullivan's (amongst others) Object Oriented CSS (OOCSS) project: https://github.com/stubbornella/oocss/wiki

She used this approach at Facebook (and Yahoo, I think?) to successfully tidy up a huge code base of thousands of CSS files down to a more manageable few.

I attended her workshop at Webstock and since then had a chance to put it into practice on a 'get it up quick' green fields project (http://chchneeds.org.nz). I must say I was really pleasantly surprised at the way this approach just avoids a lot of the pain points, as a web developer/coder (ie not an html/css guru) I so often face when just getting the simplest things to 'work'.

I guess the hardest thing for me to get my head around to was that to make things more modular you had to let go (a tiny bit) of being so religious about 'semantic html' as a requirement for the HTML, but I think its worth it to get your CSS a whole lot more modular and 'pluggable' together.

Still a bit more work to do, IMHO, but I'm definitely going to be monitoring this project closely.

Nicole Sullivan's site: http://www.stubbornella.org/content/

I agree completely, especially on a web app that is constantly growing. 2 on-the-job things that help me the most are:

1. Using the 960 grid system (or your preferred grid flavor) 2. Grouping by the following:

Body Typography Forms (Other global stuff like links and buttons) /* Layout Element 1 / ID1 {} ID2 {} class1 {} class2 {} / Layout Element 2 */ ID3 {} ID4 {} class3 {} class4 {}

I also write my styles on one line, but that's just personal preference. I find it easier to scan down for the selector, then across for the property I want. I definitely don't do it for aesthetics or file size ;)

Ever since using Drupal's Zen theme I have preferred their basic setup for grouping CSS files. Here is a rough example:

html-reset.css layout-fixed.css page-backgrounds.css messages.css pages.css blocks.css navigation.css comments.css forms.css fields.css print.css ie.css ie6.css

Drupal's CSS optimization, once turned on, will roll all of these up for you automatically, so if you aren't using Drupal you will need some sort of build system to combine and minimize everything. But I think this is a good start.

On a side note, I really like the method the Zen theme uses for CSS columns. Worth checking that out as well.

Ideally, I use Sass with Compass (http://compass-style.org/). This alone is a great start to keeping things organized. One of the things I love about Sass is that it allows partials and variable declarations, which both help immensely with code organization.

Then, my code is usually organized as follows. Each section can be extracted to a partial if it gets long enough or if more separation is desired.

  Framework includes and resets
  Variable declarations — colors, possibly specific widths  
  Universal method declarations
  Standard global tags — headings, p, a, ul, li, etc... 
  Generic form styling, usually in a dedicated partial
  Layout — container, header, content, footer
  Then to specific section styling

Since Sass uses indentation, I indent everything in each section within a top level tag. This really helps visually distinguish each section and gives a much less uniform look to the stylesheet which makes it a lot more scannable. If a section uses methods exclusively I'll declare them just above the top-level section tag.

I'm pretty happy with this approach. It was formed fairly organically but become more defined as I use it for more projects. It also seems to work well for both large and small projects, since partials can be used when the code starts getting long.