HTML & CSS Interview Question #126

What is BEM in CSS?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

BEM stands for Block, Element, Modifier. It is a naming methodology that gives CSS classes an explicit component structure: a block is an independent component, an element is a part of that block, and a modifier represents a variation or state.

Detailed Explanation

BEM stands for Block, Element, Modifier. It is a naming methodology that gives CSS classes an explicit component structure: a block is an independent component, an element is a part of that block, and a modifier represents a variation or state.

BEM can make large stylesheets easier to understand because class relationships are visible in the names and selectors can remain relatively flat. It is a convention rather than a browser feature, so teams should use it consistently only when it improves maintainability.

Code Example

.product-card { }
.product-card__title { }
.product-card__price { }
.product-card--featured { }

<article class="product-card product-card--featured">
    <h2 class="product-card__title">Projector</h2>
    <span class="product-card__price">$199</span>
</article>