CSSMedium

What is BEM and which problem does it solve?

By FrontendPro Editorial Team Updated 8/14/2026

#css#architecture#naming

Answer

Block__Element--Modifier - a naming convention that keeps specificity flat and avoids global collisions.

html

<div class="card card--featured">
  <h3 class="card__title">Title</h3>
  <p class="card__body">Body</p>
</div>

css

.card { }
.card__title { }
.card--featured { }

Every selector is a single class (0,1,0) → no escalation, no !important. The trade-off is verbose names and noisy HTML. Alternatives with the same goal: CSS Modules, utility-first (Tailwind), CSS-in-JS.

CSS