BEM: modifiers

Buttons on a site can be primary or secondary, large or small, active or disabled. Creating a new block for each is inconvenient — it is still the same button. The differences are described by modifiers: extra classes that change the look or the state.

A block modifier

A modifier name is the block name, two hyphens -- and the name of the variant. It is written next to the block class, not instead of it:

<style>
  .button { padding: 8px 16px; border: 1px solid seagreen; border-radius: 6px; background: white; color: seagreen; }
  .button--primary { background: seagreen; color: white; }
</style>
 
<button class="button">Cancel</button>
<button class="button button--primary">Save</button>

Both buttons got the base styles from .button, and the --primary modifier recolored only the second one.

A boolean modifier

A boolean modifier is either there or not — like "yes" or "no". It usually describes a state: disabled, selected, open:

<style>
  .tab { display: inline-block; padding: 6px 12px; border-bottom: 2px solid transparent; color: gray; }
  .tab--active { border-bottom-color: royalblue; color: black; }
</style>
 
<span class="tab tab--active">Description</span>
<span class="tab">Reviews</span>
<span class="tab">Delivery</span>

Just move the tab--active class to another tab, and the highlight moves with it.

A key-value modifier

When there are several variants, the modifier has two parts: a key (what changes) and a value (to what). They are separated by a hyphen:

<style>
  .button { padding: 8px 16px; border: none; border-radius: 6px; background: seagreen; color: white; }
  .button--size-small { padding: 4px 8px; font-size: 12px; }
  .button--size-large { padding: 12px 24px; font-size: 18px; }
</style>
 
<button class="button button--size-small">Small</button>
<button class="button">Regular</button>
<button class="button button--size-large">Large</button>

The size key immediately says these modifiers are mutually exclusive: you do not put two different sizes on one button.

An element modifier

Elements are modified too — -- and the variant are added to the element name:

<style>
  .menu__link { margin-right: 12px; color: steelblue; }
  .menu__link--current { color: black; font-weight: bold; text-decoration: none; }
</style>
 
<nav class="menu">
  <a class="menu__link menu__link--current" href="#">Home</a>
  <a class="menu__link" href="#">Catalog</a>
  <a class="menu__link" href="#">Contacts</a>
</nav>

Syntax variants

The original BEM from Yandex writes modifiers with a single underscore: button_size_small, button_disabled. The two-hyphen syntax (button--disabled) is more widespread. Both are equally correct — what matters is choosing one for the whole project.

Common mistake

Writing a modifier without the main class:

<style>
  .button { padding: 8px 16px; border: none; border-radius: 6px; background: gray; color: white; }
  .button--primary { background: seagreen; }
</style>
 
<button class="button button--primary">Correct</button>
<button class="button--primary">No block class</button>

The second button got only the background color; the padding, the rounded corners and the text color were lost. A modifier only adds to the block, so the main class is always needed.

Thanks for reading!