BEM Methodology: Block, Element, Modifier Naming Convention
BEM (Block — Element — Modifier) is a CSS class naming methodology created for organization, reusability and scalability of HTML and CSS code.
It helps avoid style conflicts, makes code understandable, predictable and easy to maintain when working in a team.
Breakdown
| Component | Description |
|---|---|
| Block | Independent entity, semantic component (e.g., |
| Element | Part of a block, has no meaning outside it ( |
| Modifier | State or variation of block/element ( |
Naming Convention
block__element--modifier
Examples:
.button { } /* Block */
.button__icon { } /* Element */
.button--primary { } /* Modifier */
.button__icon--large { } /* Element with Modifier */
Benefits:
BEM makes code self-documenting, prevents style conflicts, and simplifies working in teams.