CHAPTER 1 Modern CSS Architecture and Front-End Development
from most to least generic. Not only does this mean your style sheets are
saner, it probably means they are also far smaller and more efficient. If
every rule set simply adds to and extends the ones defined previously then
there is far less chance of having to undo styling, far less chance of hitting
any specificity problems, and far less chance of tripping yourself up.
Jonathan Snook writes about this kind of thing — in a far better man-
ner than I could ever hope to — in his book SMACSS: Scalable and Modular
Architecture for CSS^13. If you haven’t yet read SMACSS then stop listening
to me right now (I won’t be offended, I promise) and go get yourself a copy.
I firmly believe it is one of the best publications that modern CSS develop-
ment has seen.
So, now my project’s CSS might look a little more like this:- Reset/normalize.css
- Grid system
- Element-level styling: elements without classes, like headings, lists,
and html and body elements - Components and classed elements: navigational elements, image
galleries, buttons, forms - Style trumps: things like error states, seasonal themes, etc.
These things all layer one on top of one another, providing a logical and
planned scalability. Everything should fall into one of those categories and
sensibly slot into place, able to extend anything that came previously, and
pave the way for anything that might come next.Managing iT all
Now you have the skeleton of a big ol’, well-structured project, how are you
actually going to manage it? Well, my simple advice would be to use a lot
files in a lot of directories, plus a preprocessor.13 http://smacss.com