BEM Naming Convention — Organize CSS That Doesn't Rot

CSS rots when class names collide and selectors nest deep. BEM is the naming discipline that prevents it — and it appears in tons of codebases you'll join.

The three parts

/* Block — standalone component */
.card { }

/* Element — a part of the block (double underscore) */
.card__title { }
.card__image { }
.card__button { }

/* Modifier — a variant (double dash) */
.card--featured { }
.card__button--disabled { }

<article class="card card--featured">
  <img class="card__image" src="...">
  <h3 class="card__title">Title</h3>
  <button class="card__button card__button--disabled">Read</button>
</article>

What it buys you

• Flat specificity: every selector is one class — no .page .sidebar div h3 fights
• Self-documenting: card__title tells you exactly where it belongs
• Grep-able: search a class name, find its one definition

Pragmatic notes

Don't nest elements in names (card__header__title ❌ → card__title ✅). Modern alternatives (CSS Modules, Tailwind, scoped styles) solve the same problem with tooling — BEM solves it with discipline alone, which is why it survives.