Snack on Snook’s SMACSS

CSS guru Jonathan Snook is a regular on SitePoint and the podcast. His latest project tackles a subject few developers consider until it’s too late: CSS architecture. If you’ve ever struggled to manage a large complex site with dozens of layouts and widgets, I suggest you read Scalable and Modular Architecture for CSS — or SMACSS (pronounced “smacks”) for short.

It’s not a how-to guide, framework, snippet library or even a set of recommendations. Jonathan has documented his own observations when structuring CSS code for larger projects. The online book suggests techniques to keep your code better organized and easier to maintain. It’s a unique approach about a topic which is rarely discussed in other CSS guides.

The first section identifies four main types of CSS:

1. Base: primary HTML elements such as the body, form tags, links etc.
2. Layout: how the page is divided into sections including headers, footers, sidebars etc.
3. Modules: discrete, reusable, modular components, e.g. navigation bars, product lists, contact forms, etc.
4. State: how modules or layouts change when in a specific state, e.g. errors, hidden, expanded, active, inactive, etc.

The book builds on these concepts and discusses themes, depth of applicability managing state changes and code formatting.

If you’ve been developing layouts for a while you’re likely to recognize many of the patterns. You may disagree with some of Jonathan’s suggestions. However, the book is reassuringly concise and you will begin to consider your own approach to scalable CSS.

Recommended.