SMACSS was written in 2011. This site remains for archival and educational purposes.


There are plenty of great tools and other resources out there. Some of them are directly related to the concepts discussed here and others are just useful tools to have in your repertoire.

CSS Preprocessors

Component-based Frameworks/Methodologies

Other Frameworks


Other Resources

mustache is a logic-less template language. It's the format we chose at Yahoo!.

Pattern Primer is a PHP script that lets you preview your snippets of HTML all on one page.

Terrifically is a JavaScript/jQuery framework for working with OOCSS.


  1. About the Author
  2. Introduction


  1. Categorizing CSS Rules
  2. Base Rules
  3. Layout Rules
  4. Module Rules
  5. State Rules
  6. Theme Rules
  7. Changing State

Aspects of SMACSS

  1. Depth of Applicability
  2. Selector Performance
  3. HTML5 and SMACSS
  4. Prototyping
  5. Preprocessors
  6. Drop the Base
  7. The Icon Module
  8. Complicated Inheritance
  9. Screencast: Applying the Principles
  10. Screencast: Avoiding Content-specific Context


  1. Formatting Code
  2. Resources