Scalable and Modular Architecture for CSS

I have a long-lost count of how many websites 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 work 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 of a style guide than a rigid framework. There is no library here for you to download or install. SMACSS is a way to examine your design process and 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”.