| I've started combining both approaches, with help from SASS's '@extend' directive. What I mean is, I have a section of my CSS for defining all of those simple, modular classes like 'button' and 'button-rounded' (I start with bootstrap for most of these and then add more as I need them), with the idea that I'll reuse these over and over. BUT, these never get used in the HTML directly. Instead, I have a second section of my CSS which contains definitions for those high-level, one-time-use rules. So, for instance: // Low-level CSS (don't nest anything or it breaks @extend)
.button { // basic button... }
.button-large { // large button... }
.button-rounded { // rounded button }
.button-primary { // blue button }
.button-warning { // red button }
// High-level CSS (avoid nesting, but sometimes it is okay)
#buy_page .buy_button {
@extend .button;
@extend .button-large;
@extend .button-primary;
}
#settings_page .deactivate_button {
@extend .button;
@extend .button-rounded;
@extend .button-warning;
}
The big rule for the HTML is that I can only use IDs and classes from the high-level CSS, and should really only have one class/id per element. For the most part the high-level selectors are 1:1 with the markup, but things like widgets/components it's okay to reuse them on multiple pages.The major exception here is the CSS for actually laying out pages. I don't use a class-based grid system. Instead, I map <section> tags to rows and <header>/<article>/<aside> tags to columns. The grid behavior is defined using Susy[1], and for specific pages I can modify the standard layout pattern if necessary. The result of all of this is CSS that is easy to navigate. The low-level CSS is highly reusable, and the high-level CSS is structurally similar to page content, yet keeps the presentation information entirely out of the HTML. It also sometimes results in very long selectors, but that's actually not an issue performance-wise and has yet to cause me any issues. [1]: http://susy.oddbird.net/ |