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

Screencast: Avoiding Content-specific Context

Once again, a request from Twitter creates an opportunity to review a design.

In this installment, Fran Pérez sends me an example mockup with some selected naming convention. I review the naming convention and suggest alternatives that should lead to a more flexible system.

Naming things is hard and I hope this screencast highlights ways in which a better naming convention makes things easier in the end—even if coming up with the names is hard.

Avoiding Content-specific Context
Playtime: 18m37s

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