A layered strategy to managing massive amounts of CSS across a massive amount of projects.
- Structural Foundation
- App Foundation
- UI Foundation
- Aesthetics
- Structural Framework - gist & structure.scss
- Resets - Meyer, Normalize, Gridless.
- Mixins
- Compass, if you're using Sass.
Each application has more than just plain markup and styles these days. You have full-featured interface frameworks like jQuery UI and jQuery Mobile. If you're working with one of those then layers one and two are already covered for you.
Instead, if you were working with a UI Library like TJ's UIKit (not endorsing it, just using it as an example) then you still have an impressive amount of freedom with regards to how it's styled, but it's also outside the scope of your application's structural foundations, thus it goes here.
As a sniff test, your site should still be stylable via the browser's default font and color choices and it should scale when you increase the font size. The heavier UI frameworks will not pass this test, but if you're using them that's probably alright.
Each application also has a unique layout that must be considered. Most of it should be possible with the structural foundations you laid down in layer one, but there are occassionally elements that are fundamental to your application that cannot be replicated without some additional styles. Those styles go here.
That said, this layer is likely to be very thin.
Your site should also pass the sniff test at this point.
At this point it's all about look and feel, textures and colors, fonts and shapes, touchy and feely.
Everything else should have been established by this point.