Scalable and Modular Architecture for CSS

CSS is messy. At least, it always seems to get messy as projects and teams grow in size. If you’ve ever battled specificity issues by throwing “important!” at them, or found the components of your site so increasingly intertwined that you’re afraid to change anything, then this book is for you. If you’ve ever come into a project and found yourself confused by the existing code, then this book is for your co-workers. Scalable and Modular Architecture for CSS explores techniques that can make your sites more manageable.

A flexible guide to developing sites small and large. Scalable and Modular Architecture for CSS (or SMACSS, pronounced “smacks”, for short) is more style guide than rigid framework. There’s 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’s 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?!

Learn about the four types of CSS rules for state-based design, and how this approach to development can make it easier to work on larger sites and with larger teams.

Contents
Core
Categorizing CSS Rules
Base Rules
Layout Rules
Module Rule
State Rules
Theme Rules
Changing State

Aspects of SMACSS
Depth of Applicability
Selector Performance
HTML5 and SMACSS
Prototyping
Preprocessors
Drop the Base
The Icon Module
Complicated Inheritance

Appendix
Formatting Code
Resources