BEM Methodology

BEM (Block, Element, Modifier) is a CSS naming convention that makes component relationships explicit in class names. It was developed at Yandex and has become one of the most widely adopted CSS organisation methodologies.

---

Syntax

.block {}
.block__element {}
.block--modifier {}
.block__element--modifier {}

Part	Double separator	What it represents
Block	(none)	Independent, reusable UI component (.card, .navigation, .btn)
Element	__ (double underscore)	A child that only makes sense inside its block (.card__side, .navigation__nav)
Modifier	-- (double dash)	A variant or state of a block or element (.card__side--back, .btn--white, .btn--animated)

---

BEM in Natours

Examples from the Natours codebase:

<!-- Navigation block -->
<div class="navigation">
    <input class="navigation__checkbox">
    <label class="navigation__button">
        <span class="navigation__icon"></span>
    </label>
    <nav class="navigation__nav">
        <ul class="navigation__list">
            <li class="navigation__item">
                <a class="navigation__link">…</a>
            </li>
        </ul>
    </nav>
</div>
 
<!-- Card block with modifier -->
<div class="card">
    <div class="card__side card__side--front">…</div>
    <div class="card__side card__side--back card__side--back-1">…</div>
</div>

---

Why BEM Works

Flat specificity — every rule targets a single class, so specificity is always 0,1,0. No div.nav > ul li a chains that are impossible to override cleanly.

Self-documenting — reading a class name tells you both what it is and where it belongs. .card__heading-span--1 is clearly the first heading span inside a card.

Scoped by convention — block names act as namespaces. .btn styles can never accidentally leak into .card__btn if you follow the convention.

---

BEM + Sass Nesting

sass-scss nesting with & maps naturally to BEM:

.navigation {
    &__nav { … }        // .navigation__nav
    &__item { … }       // .navigation__item
    &__link {
        &:hover { … }   // .navigation__link:hover (not BEM, but co-located)
    }
}

This keeps all navigation styles in one block in the sass-scss partial and compiles to flat BEM selectors in the output CSS.

---

See Also

• css-architecture — the 7-1 folder structure that BEM pairs with
• sass-scss — preprocessor used to write BEM more ergonomically
• schmedtmann-2018-natours-advanced-css — source repo