BEM Naming Convention Explained

The Problem BEM Solves

As a stylesheet grows, class names like .title or .button become ambiguous and prone to accidental collisions - which component do they belong to, and what happens if two different components both want a class called .title? BEM (Block, Element, Modifier) is a naming convention that makes this explicit.

Block, Element and Modifier

A Worked Example

<div class="card card--featured">
  <h3 class="card__title">Heading</h3>
  <p class="card__body">Some text.</p>
  <button class="card__button card__button--disabled">Buy</button>
</div>

.card { border: 1px solid #ddd; }
.card--featured { border-color: gold; }
.card__title { font-size: 1.25rem; }
.card__button--disabled { opacity: 0.5; }

Why This Naming Convention Helps

• Every class name reads as flat and specific - no need for nested descendant selectors that create fragile specificity chains.
• Renaming or moving an element inside a block's markup does not silently break its styles, since the class does not depend on HTML structure.
• It is immediately clear which component a class belongs to just by reading its name.

A Tradeoff Worth Knowing

BEM class names can get long and slightly repetitive (card__button--disabled) - a deliberate tradeoff in exchange for avoiding naming collisions and specificity problems as a project scales.