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

Screencast: Applying the Principles

Donovan Hernandez had tweeted of his problems in applying SMACSS to his project. He was getting frustrated and felt that SMACSS was limiting his ability to get things done.

Donovan was nice enough to let me use his code as an example of how I would apply the principles of SMACSS on his project. (You'll have to excuse my dorky pronunciation of Donovan’s last name.)

The screencast touches on the following points:

  • applying a naming convention that clarifies its purpose
  • ensuring the CSS only affects the elements it’s supposed to
  • reducing the depth of applicability

Applying the Principles
Playtime: 20m43s

The source files:


  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