CSS Methodologies: BEM

Analogy categoryAnalogies

Introduction

BEM stands for Block, Element, Modifier, and it's a naming methodology for CSS classes designed to make stylesheets predictable, reusable, and easy to maintain in large projects. Rather than relying on nested selectors or deeply specific rules that are fragile and hard to override, BEM encodes an element's relationship and state directly into flat, self-descriptive class names.

🏏

Cricket analogy: BEM is like a scorecard naming system that flatly labels 'Team-Batsman' and 'Team-Batsman--out' instead of nesting deeply into 'Match > Innings > Team > Player,' making it easy to reuse and override a single player's status without untangling the whole scorecard hierarchy.

Syntax

css

/* Block */
.card { }

/* Element: block__element */
.card__title { }
.card__image { }
.card__button { }

/* Modifier: block--modifier or block__element--modifier */
.card--featured { }
.card__button--disabled { }

Explanation

A Block is a standalone, reusable component such as .card or .nav. An Element is a part of a block that has no standalone meaning outside it, written as block__element, such as .card__title. A Modifier represents a different state or version of a block or element, written as block--modifier or block__element--modifier, such as .card--featured or .card__button--disabled. Because every class name is flat (no nested selectors like .card .title), specificity stays low and consistent, and any class can be safely reused or overridden without unexpected cascade conflicts.

🏏

Cricket analogy: A Block is a standalone unit like .team, an Element is a part with no standalone meaning like .team__captain, and a Modifier is a state like .team--champions or .team__captain--injured; because names are flat, not nested like '.team .captain', specificity stays low and any class can be reused safely across grounds.

Example

css

.menu { display: flex; list-style: none; }
.menu__item { margin-right: 12px; }
.menu__link { color: #374151; text-decoration: none; }
.menu__link--active { color: #2563eb; font-weight: 600; }
.menu--vertical { flex-direction: column; }

Output

With this HTML: <ul class="menu menu--vertical"><li class="menu__item"><a class="menu__link menu__link--active">Home</a></li></ul>, the menu lays out vertically because of the menu--vertical modifier, and the active link is styled blue and bold via menu__link--active, all without writing a single nested or descendant selector.

🏏

Cricket analogy: In a fielding chart with class 'formation formation--attacking' and a fielder 'formation__slip formation__slip--catching', the attacking modifier alone shifts the whole field inward and the catching modifier highlights that slip fielder, all without a single nested selector.

Key Takeaways

Block: standalone component, e.g. .card. Element: block__element, e.g. .card__title. Modifier: block--modifier, e.g. .card--featured.
BEM class names are flat, avoiding nested selectors and keeping specificity low and consistent.
Modifiers are typically used alongside the base block/element class, not as a replacement for it.
BEM improves maintainability in large codebases by making each class name self-documenting.