SMACSS & SASS

I had to read Jonathan Snook’s SMACSS twice, the second time much slower, to digest the author’s analytical process on CSS categorization. In a nutshell, Snook divides his styles into five parts: base, layout, module, state and theme. I like his naming convention to make the stylesheet more readable. For example he uses prefix like .layout- for layout.

When writing my CSS, one of the rules I try to avoid is deep nesting and Snook suggests the same:

We are trying to strike a balance between maintenance, performance, and readability. Going too deep may mean less “classitis” within your HTML but it increases the maintenance and readability overhead.

The chapter on CSS preprocessor serves as a great introduction; therefore, Hampton Catlin (inventor of Sass) and Michael Lintorn Catlin’s Pragmatic Guide to Sass is a perfect complement to get started with Sass. The lean, concise instructions will help you start using Sass’s features including variables, mixins, nesting, importing, extending and take it to the next level with Compass.

I have started to apply Snook’s categorization in my CSS and it is indeed very effective. I am also working backward to get my style.css rewritten into style.scss only to recompile back out to another style.css. It seems like a redundant’s redundant task, but the process helped me see how Sass handles CSS. I recommend both books if you still have yet to make the leap to preprocessor.