CodePark/ questions / CSS architecture & tooling
START PRACTICINGPRACTICE
Frontend question · CSS & HTML › CSS architecture & tooling

What is BEM and what problem does it solve?

<div class="card card--featured">
  <h3 class="card__title">Plan</h3>
  <button class="card__button card__button--primary">Buy</button>
</div>

BEM (Block, Element, Modifier) is a class naming convention:

  • A block is a standalone component: card.
  • An element is a part of a block, joined with two underscores: card__title.
  • A modifier is a variant or state, joined with two dashes: card--featured.

It solves the global nature of CSS. Every class lives in one shared namespace, so styles leak and collide. For example, two teams both write .title, and each breaks the other's page.

BEM helps in three ways:

  • Selectors stay a single class, so specificity is flat, low and equal.
  • It avoids descendant selectors that depend on the HTML structure.
  • You can read the purpose of each class from the markup.

The downsides are long class names and reliance on discipline, because nothing enforces it. Tools like CSS Modules solve the same scoping problem automatically.

  • BEM names classes as block__element--modifier.
  • It avoids global name collisions by convention.
  • Single-class selectors keep specificity flat.
  • It is verbose and depends on team discipline.