Introduction

I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

I have been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. The concepts were vaguely there with the smaller sites that I had worked on but have become more concrete as a result of working on increasingly complex projects. Small sites don’t often hit the same pain points as larger sites or working with larger teams; small sites aren’t as complex and don’t change as often. However, what I describe in these pages is an approach that works equally well for sites small and large.

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?! Feel free to take this in its entirety or use only the parts that work best for you. Or don’t use it at all. I understand that this won’t be everybody’s cup of tea. When it comes to web development, the answer to most questions is “it depends”.

Inspiration

In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. Nicole Sullivan's Object Oriented CSS, Jina's presentations on CSS Workflow, Natalie Downe's talk on Practical, maintainable CSS, and, lastly, Jeremy Keith's Pattern Primer were large influences on what was to become SMACSS.

What’s in here?

My thoughts have been compartmentalized around a number of topics related to CSS architecture. Each thought is detailed in its own section. Read the sections in sequence or out of order or pick and choose what seems most relevant to you. It’s not 1000 pages of writing; the sections are relatively short and easy to digest.

Now get started and dive in!