Scalable and Modular Architecture for CSS

by Jonathan Snook

What is it?

SMACSS (pronounced “smacks”) is more style guide than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isn’t building a site with CSS these days?!

Get to know Scalable and Modular Architecture for CSS

Genres: Programming, Design, Nonfiction, Web, Website Design, Technical, Technology

107 pages, Kindle Edition

First published January 1, 2011

Reviews

[Kevin · Rating 3 out of 5]

First of all, after reading this book, I plan on applying the SMACSS approach to my web development projects. The concepts described here form a sound pattern and structure for designing modular front-end components that increase your likelihood of yielding maintainable code. I learned quite a bit from the book and greatly enjoyed its brevity.

The downside is the disjointed way it's laid out, seemingly jumping from topic to topic without really tying it all together. The reader is left to assemble the big picture while hacking through specifics. The approach would have been better communicated by laying out a high-level map and referring to it whenever jumping into the specifics and then tying it all together with a single comprehensive example at the end.

Regardless, it serves as a good introduction to the idea of extending modular, component-based software design all the way to stylesheets. More books are sure to follow and expand on these ideas, but it's a good starting point as of now (mid-2012).

[Lex Javier · Rating 4 out of 5]

A great idea with an average book. I wanted more explanations and examples, but Snook is quite the minimalist writer. But length is my only gripe, and Snook is in no way a minimal genius. He's quite the clever one, in fact.

SMACSS is greatly better than anything-goes CSS, and is lot less cluttered and a bit more intuitive than OOCSS. I can't compare SMACSS to others I have not yet learned, but today I safely declare it's my favorite.

Throughout the text, Snook implies that the motivation for using a pattern like SMACSS is for maintenance and scalability, and I have to say that statement is incomplete. It's power is in making long, difficult, tedious thinking fast, easy, and fun.

[Sergey Shishkin · Rating 3 out of 5]

The book is short (which is good) and has some really valuable insights. For me as a software developer, the principles of separation of concerns and favoring composition over inheritance were rather obvious though. Nonetheless it was good to see the same principles of solid software design apply to CSS.

On the downside I would point out the scattered structure of the book. It is merely a compilation of essays rather than a book. Reading the book online was quite helpful as it allowed me to follow the comments of other readers and to better understand the struggles of the CSS community.

[Patrick Matte · Rating 5 out of 5]

J'ai commencé à faire du Web en 1995, bien avant la technique d'intégration multimédia du Cégep de Sainte-Foy. Je fais donc parti des autodidactes. Bien que je code beaucoup moins aujourd'hui, j'ai trouvé ce livre d'une très grande utilité pour savoir programmer des feuilles de styles qui pourront survivre au test du temps et aux inévitables changements de direction dans un projet.

[Eglė · Rating 4 out of 5]

Short, good read.
Great thoughts on architecting CSS.

[Alex · Rating 5 out of 5]

Such a great book for the area that it's covering, and considering the audience is probably largely ranged across the full stack (backend developers through to the web designers); I'd say it's found a common language that both sides can easily understand.

[January · Rating 4 out of 5]

Not sure how I came across this, but this remains relevant even now in 2018. I plan on applying SMACSS to my new web projects. As someone who spends more time maintaining sites than building them, I saw a lot of solutions in the book for problems that I’ve been wrestling with, like endless super-specific and !important overrides on base styles that were set up two years ago with no idea that I’d be using, say, an hr in another way down the road.

The concepts, like creating modules for reuse across projects and standardizing colors and design styles with theme classes, are things I’ve been playing around with already. But it was great to have an already thought out system handed to me. I also enjoyed the sections on sprites and preprocessors, which I don’t currently use (and now plan to look into).

I read this online and found probably the most useful part to be the two screencasts at the end which actually SMACSS-ified two existing projects. The only thing I thought was missing was an actual sample CSS sheet. Though I suppose i could check out the one for his site—I’m guessing that’s SMACSS.

[Radu · Rating 4 out of 5]

Ended up reading this to have more consistency in my projects and a well established methodology. The only reason SMACSS appealed to me more than BEM or other methodologies is because my projects were already headed kind of naturally in that direction. This book is great regardless if you are already familiar with such methodologies or not, and it does take you from basics all the way to structuring larger projects that will scale long term. It doesn't offer a solution and there are no strict rules presented here, it's more of a guideline for structuring and writing your CSS.

[Dave · Rating 4 out of 5]

5 stars for SMACSS, but 3 stars for the writing in this book.

[Nick Prodromou · Rating 4 out of 5]

A good read, easy to digest.. some good ideas for component/module based systems.

In 2017 it's quite dated but nonetheless worth the read.

[Amy · Rating 4 out of 5]

Made me consider more on how to keep CSS styling modular and loosely coupled with HTML. Added perk: explained SCSS's usefulness.

[Darrell Ulm · Rating 5 out of 5]

At first I was hesitant about SMACSS, yet it has grown on me and this methodology to create CSS is worth considering for different types of web development projects.

[عبدالرحمن حافظ · Rating 5 out of 5]

For People who likes patterns.

[Jefferson · Rating 5 out of 5]

Great book with great ideas.
I just wish it had more examples to help me apply it on my projects.

[Rob · Rating 4 out of 5]

Short version: SMACSS isn't a downloadable framework; it's a CSS design philosophy: "Design for the system, not the site." Snook delivers some great advice on how to construct your project's CSS--much of that advice being compatible with and reminiscent of Nicole Sullivan's OOCSS proposals--but it's the kind of thing that requires you to change the way that you think. You need to be focused and disciplined. It's a philosophy worth learning, and these are rules worth applying--but make no mistake: this isn't an easy drop-in solution.

Disclosure: I read the online version, and did not read the "Premium Content" chapters. That said, I was lucky enough to see Snook's talk during the 2012 E4H "CSS Summit". (So I think I got the message...)

[Alessandro Pellizzari · Rating 2 out of 5]

L'idea é molto interessante, perché solitamente i css partono di dimensioni piccole e gestibili per poi diventare una massa informe molto velocemente.

Il problema è che, tranne che per una visione ad ampio spettro, questo manuale non riesce a spiegare come applicarla a progetti reali. Per esempio non si capisce cosa sia un modulo. A volte sembra sia un box che contiene determinate informazioni, altre volte sembra sia un componente tipo un bottone. Non si capisce se le informazioni di layout vadano messe solo nel layout o anche nel modulo o nel tema. Ecc. ecc.

La mancanza di esempi pratici e il prendere solo il caso Yahoo (e solo una piccola parte del sito Yahoo) lo rendono ancora meno comprensibile.

Indeciso tra 1 o 2 stelle, ne concedo 2 per l'idea e l'impegno.

[Stefan Kanev · Rating 3 out of 5]

It's an OK book. The ideas seem good and I intend to apply them at my next project, but I found the book seriously wanting in two qualities. First, it just lacks structure. The author jumps between this and that and you can find the common thread if you look for it, but in no way it does a good introduction to the subject. Second, while the author makes a point of not being prescriptive, I found that I needed more rules. Half of the time I felt the book said "anything goes, as long as you have structure and convention". While I agree with the former, I don't see how this is anything new.

Apart from that, the book is worth reading if you do CSS. It has some ideas which are applicable or at least inspirational. It's also short, so it is quick to read.

[Trevan Hetzel · Rating 4 out of 5]

I've been meaning to get this book read since it's oftentimes referred to by front-end developers as one of the most popular CSS methodologies. I came in with a pretty good understanding of the methodology and left with the same impression: bits and pieces work for me. The object oriented CSS methodology coined by Nicole Sullivan is a "competitor", if you will, of this methodology and I thought that I leaned more toward her methodology than Snook's SMACSS, but after reading and evaluating my coding standards as of late I'm finding myself leaning now more towards SMACSS. However, I've got my own differences and preferences to both methodologies and will be writing a post soon stating my stances!

[Dan · Rating 4 out of 5]

Good, short read. Was able to get through it on a 2 hr plane flight. Snook goes over organizing one's CSS in small, modular chunks that result in a maintainable and scalable framework. He illustrates ways to avoid specificity conflicts and excessive code. My colleagues and I are already implementing most of the practices outlined in the book. We use Sass (compiled with Grunt), and the file structure is organized by components and we strive to keep the code as universal and re-usable as possible. Media Queries are also written on a per component basis. It was great to read this book and see that our workflow is justified. I recommend this book to any modern front-end developer.

[Boyan · Rating 5 out of 5]

Interesting ideas presented in a way, that is very easy to understand. Everything is systematic, just like the idea behind this way of writing css and thinking about creating web-sites in general.

I really liked the examples and the real world situations described in each section.

I don't think it will change much may workflow, because I already use most of the authors ideas in my work, but there is definitely a lot of useful stuff, which we tend to neglect there.

Highly recommend the book to anyone who is involved in the process of website creation.

[Jess · Rating 5 out of 5]

An invaluable resource for front-end development. I have spent a great deal of time wading through the plethora of "best practice" options offered by respected, experienced designers. Into this noise, enters Jonathan Snook. The SMACSS approach offers not a static structure or set of rules but an ideology. The concepts are written clearly and coupled with helpful examples to aid the visual learner. Overall, the approach finds the balance between semantics and flexibility which I have been seeking for a long time. This was an easy read that has greatly helped mature my development process.

[Bruce · Rating 4 out of 5]

If you have seen CSS on a big site you will see why this might be useful. Some good practical advice on CSS following some logical principles you may have seen in works like the Pragmatic programmer. If you are doing large scale front end web and want to do more than hacks with Firebug and !important then this is for you. Also useful if you don't have a computer science background but want to apply some of the core principles of the discipline

[Moises Cuervo · Rating 4 out of 5]

Definitely this book will be highly applicable in all my incoming projects, helped me a lot in order to find a better the way to organize my css code and make components highly re-usables, I recommend read this book if you are planning to use libreries like react.js. Also the book have clear examples but not many, I'd have liked more examples. BTW actually I give it a 4.5 :)

[Kal Ström · Rating 3 out of 5]

The book has some good ideas, but mostly I think it's just common sense front-end development.
And the argument for preprocessors doesn't really fit the book IMHO.

I would have liked to see more of a comparison with the oocss technique since people seem to be choosing between these two.

[Christoffer Klang]

Very interesting thoughts and ideas, and definitely useful as a guide. Felt a bit thin on material for a book though. Could not really shake the feeling that it's basically a blog post in epub format.

[Stef · Rating 4 out of 5]

There are a lot of CSS frameworks but this one stuck for me. Well thought out and well written by one of the experts in the field who has a lot of experience with complex sites that require big teams.

[Janvier Pakaew · Rating 3 out of 5]

A different approach to organizing your CSS. More of like an approach used by Programmers. Dividing the different parts of your codes for better Management and for more maintainable code for future use.

[Gregory Benner · Rating 3 out of 5]

Not too bad, I like to see some ideas for organizing CSS finally emerging.
I'm not sold on the categories/style for organisation as of yet. Maybe one day.
I agree what ever system you go with you should be consistent, and also I like the idea of big bold comments all throughout the stylesheets.

[Enikő · Rating 5 out of 5]

Good book. More about the organization about your css code. It is a must for those who use CSS. I've just loved that it's encapsulates the the elements. Great book. And a quick read too. I will put into my frequently used bookshelf.

[Akos Hochrein · Rating 3 out of 5]

The book is useful for small and big projects alike. CSS knowledge is recommended to understand everything in it. The time invested is minimal for very valuable and useful practices to follow in the chaotic world of stylesheets.