MontageJS naming for BEM

This is taken from Nicholas Gallagher’s awesome article “About HTML Semantics and CSS Architecture“.

The conventions are taken from MontageJS but Nicholas’ examples make it really clear.

/* Utility */
.u-utilityName {}

/* Component */
.ComponentName {}

/* Component modifier */
.ComponentName--modifierName {}

/* Component descendant */
.ComponentName-descendant {}

/* Component descendant modifier */
.ComponentName-descendant--modifierName {}

/* Component state (scoped to component) */
.ComponentName.is-stateOfComponent {}
Published
Categorized as css

Leave a Reply

%d bloggers like this: