BEM and the post-BEM era

BEM (Block Element Modifier) — the 2014 naming convention

<div class="card card--featured">
  <h2 class="card__title">Title</h2>
  <p class="card__description">Description</p>
  <button class="card__action card__action--primary">Click</button>
</div>

• block — .card
• block__element — .card__title (a child of card)
• block--modifier — .card--featured (variant of card)
• block__element--modifier — .card__action--primary

The naming convention guarantees no accidental cascade conflicts. The trade-off: VERY verbose HTML and CSS.

When BEM made sense

Pre-2020: no @scope, no @layer, no custom-property prop pattern. BEM's verbose names were the SAFEST way to avoid cascade fights in a 50-developer codebase.

When BEM is overkill in 2026

For greenfield projects with @scope + @layer + custom properties, you DON'T need BEM's full verbosity:

<div class="card featured">
  <h2>Title</h2>
  <p>Description</p>
  <button class="action primary">Click</button>
</div>

@scope (.card) {
  h2 { ... }
  p { ... }
  .action { ... }
  .action.primary { ... }
}
.card.featured { ... }

Same isolation guarantees, half the typing.

Three valid modern patterns

1. Tailwind/utility-first — short component names + utility classes in HTML.
2. @scope + nested — short class names, scoping handled by @scope.
3. BEM — still valid for huge teams or legacy migration paths.

Pick one per project. Don't mix.