A quick review of SMACSS

If you haven’t heard of this yet, SMACSS stands for Scalable and Modular Architecture for CSS. There have been a lot of people saying a great many positive things about it and I’d just like to add my voice to that crowd with this short review of the book.

The printed version of the book itself set me back a mere £15, even with shipping included. A lot of the core information is freely available on the website but the book goes into more detail, explains the concepts better and includes more examples. It’s a little over 100 pages long and I (who doesn’t read very often) worked my way through it in two evenings.

The best thing that SMACSS explains is how to separate your styles into 5 sections: base, layout, modules, state and theme. Each of these sections is fully described and examples are given. Good advice is provided to help you understand which rule belongs where and how to name them to help identify them in your markup. The modules are the main section that it explains. The idea of sub-classing modules is probably one of the most innovative that I’ve read. A couple of things that I have started doing since reading this book include moving away from CSS shorthand. Although it’s a handy feature, it can make the inheritance that sub-classing requires trickier, especially if another developer doesn’t realise the implicit defaults that CSS will add in. I’ve also started using underscores to describe a rule that’s part of a module and using the hyphens to denote the sub classing.

SMACSS also subtly demonstrates the power of small selectors; looking through my own style sheet for this website the largest selector I could find had 1 id, 1 class and 1 element – even that was just an IE7 fix. The smaller the selector, the easier it is to type and the easier to use the states that the book describes.

If I had to find a criticism at all, it would be that you need to have a good deal of control over your markup in order to implement the lessons this book is trying to teach. I found it very difficult to style this WordPress site using SMACSS, although a few things have snuck in. SMACSS also assumes you have a basic understanding of CSS already; it won’t explain selectors or the cascading nature of CSS. It will teach you how to organise your styles and separate your declarations to make everything more modular, but if you’re looking for a beginner’s guide, this book is not it.

Another criticism I have is that I’ve never found a use for the theme rules. As far as I can tell, they’re handy if you want a website where the user can personalise the appearence of the site, but very little (if any) use at all other times. Finally, I prefer to alphabetise my rules so the section in the book about organising the rules is something I didn’t agree with; I’ll freely admit that’s a remarkably petty gripe.

To sum it all up: before you start work on a large website or one that’s likely to evolve a lot throughout it’s life, it’s well worth reading SMACSS first. It’s also worth reading it if you suddenly find yourself in charge of a group of coders as the modularity it encourages will make teamwork much easier. IUn a sentance: just buy SMACSS and read it. It has greatly improved my understanding of CSS and the way I write it. I cannot recommend it enough.

2 thoughts on “A quick review of SMACSS

    • No, not heard of that, but I like it a lot. I tend to do similar things with my CSS anyway – I denote a sub class is with a hyphen and an inner element with an underscore. I think little naming conventions like that make the style sheet much easier to understand

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>