SMACSS –; Scalable and Modular Architecture for CSS
I bought Jonathan Snook’s Scalable and Modular Architecture for CSS five months ago and, embarrassingly, I’ve only just read it. As a “flexible guide to developing sites small and large”, it’s fantastic.
Last month I was lucky enough to see Jonathan speak about State-Based Design (a concept which he covers in SMACSS) at the FromTheFront conference and it reminded me to put the book at the top of my to-read pile. It’s not a long book, it’s about the same easy-to-digest length as the A Book Apart series, which meant I got through it (whilst taking notes) in a couple of hours. I also love that there’s a mailing list that keeps you updated with the latest methods and other relevant news.
I’m an HTML and CSS girl
As a front-end developer, I’ve long been obsessed about writing really good clean and semantic HTML and CSS. Frameworks and boilerplates tend to make me cringe. Accessibility and progressive enhancement are what I value the most. It was lovely to read a book about CSS that was from a practical point of view but still held those ideals. The SMACSS core goals are:
- Increase the semantic value of a section of HTML and content
- Decrease the expectation of a specific HTML structure
Jonathan walks you through the way that he lays out his stylesheets, informs you the reasons behind his decisions and backs these up with solid examples. There’s no “you must do this” or “you’re not standards-based if you don’t do that.” Jonathan reiterates throughout that his way isn’t the only way, but it works for him.
This is the exact opposite of what frameworks do. Frameworks tend to do the thinking for you, and encourage lazy blanket usage (perhaps not intentionally, but that’s what they tend to result in.) Jonathan teaches you the background that you need in order to make your own informed decisions.
Throughout the book, Jonathan also refers to how this structuring of CSS affects older browsers, and how it works with newer development techniques such as those using media queries.
Really thinking about your CSS
One thing that really stood out for me in SMACSS is the importance of process when structuring your CSS:
With a module-based system, it is important to consider state-based design as applied to each of the modules. When you actively ask yourself “what us the default state,” then you’ll find yourself thinking proactively about progressive enhancement. It also can have you approaching issues slightly differently.
This systems-based way of thinking really appeals to me as I’ve been thinking a lot about design systems as part of responsive design. It’s great to read about the usefulness of patterns in both development and design, making our planning a lot smarter and considering future use to create maintainable stylesheets.
Starting from the beginning
The structure of the book works really well and should help someone fairly new to CSS as well as more advanced masters of markup. It starts with the basics of structuring (ordering) your CSS, then moves on to more advanced details with selectors and performance. After the main SMACSS principles are covered, Jonathan goes on to explain the role of pre-processors and how they could work with the SMACSS principles. His explanation of Sass actually helped me understand how to use it more efficiently (and I already use Sass on all my projects) and would do well as a primer for someone who is completely new to pre-processors.
Finding the balance
Whilst reading SMACSS I’ve managed to pinpoint the biggest problem in my CSS; I have a tendency to use overly qualified selectors (such as body.home div#content h3.entry-title.) I’m not sure why I do it, though I suspect it’s because it looks more visually balanced than .entry-title. And also I’m an idiot.
Jonathan points out that structuring your selectors in this way is tying your CSS behaviour to your HTML structure (and hierarchy.) Of course, as someone obsessed with semantics and hell-bent on avoiding ‘classitis,’ I’ve tended to rely heavily on the structure of my HTML (and the unique nature of HTML5 elements) to hook my CSS but it does not make for modular or scalable CSS.
I’ve learnt a great deal from SMACSS and I believe that writing good CSS is about finding that balance between writing clean, reusable HTML (written independently of CSS) and clean, reusable CSS (making use of HTML element classnames.) I feel like this book has made me understand a lot more about CSS and I really recommend it if you’re striving to be more efficient. I don’t often collaborate on markup, but I can imagine that SMACSS could help make team projects considerably easier.
Great! :D Sounds like what I’ve been looking for…
I’m definitely getting a copy soon :)
Thanks for the reminder… just bought for my train ride.
Nice review.
Hey Laura,
Thanks for posting this great review. There are a lot of CSS books out there and I’m not often tempted to buy one, but your writeup has pushed all my CSS buttons, so now I might have to…
Cheers
Wow! Even i tend to use overly qualified selectors most of the time, but never realized that I am actually making my css dependent on the HTML structure.
Thanks for this article!
My exact feeling as well.
‘And also I’m an idiot.’ :D
no, you’re not! great shoptalkshop btw. keep it up!