Scalable and Modular Architecture for CSS

I finally found time to sit down with Jonathan Snook’s Scalable and Modular Architecture for CSS, or SMACSS (prounounced “smacks”), and really enjoyed it. It’s a short read, but I didn’t just want to read it, I wanted to study it. SMACSS is not a framework, per se, rather a style guide.

As noted by the author:

“SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thoughts process. It is an attempt to document a consistent approach to site development when using CSS.”

So, essentailly, it’s a book on how to architect your CSS.

I was interested in spending some good time with Scalable and Modular Architecture for CSS for several reason. For one, the whole premise of SMACSS is to facilitate scalability. I maintain several larger sites and I was curious to find out how the SMACSS guidelines aligned to my own. Likewise, I mostly use Sass these days and one of the biggest advantages to Sass, in my opinion, is how easy it is to modularize your CSS. So I was interested in hearing what tips SMACSS offered on modularizing your CSS. Turns out, there’s a whole section dedicated to working with Sass, which was one of my favorite parts of the book. Lastly, the way SMACSS was written—compartmentalized so each section can be read in sequence or in whatever order you’d like—made it really easy to jump around the book. With this in mind, I didn’t just want to read the book, I wanted to have it at my side as I did some refactoring so I could apply some of the book’s recommendations and see what happens, see how well the SMACSS approach jived with my workflow.

So what did I take away? Well, for one, the undocumented style guide that I maintain my sites with aligned nearly identically with what SMACSS put forth. The re-assurance is comforting. SMACSS recommends things like how to organize your CSS, naming conventions to use for your classes and best practices for writing selectors and integrating with new HTML5 elements—all of which I had unconsciously already applied to my own work. Snook also reviews some of the “gotchas” when working with preprocessors, like Sass, which I am conscious of and actively avoid—things like unnecessary extensions and overused mixins.

The most interesting part of Scalable and Modular Architecture for CSS to me was what Snook calls “Depth of Applicability”. At its core, SMACSS sees two of the biggest pitfalls with writing scalable and modular CSS as, one, relying too heavily on a defined HTML structure, and two, applying selectors to deep HTML.

An example of depth of applicability from the book:

“For example, body.article > #main > #content > #intro > p > b would have a depth of applicability of 6 generations.”

The advantages of reducing the depth of applicability to the shallowest possible means avoiding specificity issues, making your CSS code easier to read and allowing for content to change without requiring additional CSS maintenance, among many others. Snook goes over how to reduce depth of applicability in good detail and provides clear examples showing how to do it, which makes refactoring your own code a fun exercise to work through.

SMACSS was well worth the $20 I paid for the printed copy, and is a steal at $15 for the e-book. It’s sprinkled with tons of tips and tricks. I’d recommend this book to anyone who works on developing or maintaining websites that are bigger than just a handful of pages. You may not read anything mind-blowing, but for anyone who hasn’t documented their own personal set of guidelines for developing and maintaining CSS, Jonathan Snook’s Scalable and Modular Architecture for CSS will be a great resource to keep handy.