What is BEM methodology (block element modifier)
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., header, button) |
| Element | Part of a block, has no meaning outside it (button__icon) |
| Modifier | State or variation of block/element (button--active, button__icon--small) |
Naming Convention
block__element--modifier
Examples:
css
.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.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.