BEM Naming
BEM stands for Block, Element, Modifier. A block represents a component, an element is a meaningful child part, and a modifier represents a variation or state.
BEM is not mandatory, but its naming principles can reduce ambiguity in large stylesheets.
BEM Naming Structure
BEM Example
.card {}
.card__title {}
.card__actions {}
.card--featured {}
.card--compact {}💡 The naming structure communicates component ownership and variation.
Key Takeaways
- Blocks represent independent components.
- Elements represent component parts.
- Modifiers represent variations.
Knowledge Check
In BEM, what does `.card__title` usually represent?