Stop 03 · CSS3Topics · 17/17

BEM

In short

Class names like .box2 and .red-text fall apart in a big project. BEM is a simple naming habit that makes every class tell you exactly where it belongs.

Block-Element-Modifier — a naming convention (`.card__title--active`) that makes CSS class names self-documenting and reduces specificity conflicts in large projects. BEM creates a predictable naming vocabulary that makes component relationships explicit and reduces accidental coupling between unrelated parts of a stylesheet.

The jaadu mascot as a courier holds a parcel up to a particular flat door in an apartment corridor.

Think of it like this

A full postal address

'Flat 3B, Sunrise Apartments' tells the courier exactly where to go. BEM names work the same: .card__title--large reads as 'the title inside the card, large version'. You know where it lives just by reading it.

Watch it happen

Reading a BEM name

.card (block)

.card__image

.card__title

.card__link

.card--featured

1/4The block is the standalone component: .card.

The big ideas

What you need to know

Block

A standalone component, like .card, .navbar or .search-form.

Element with __

A part that only makes sense inside its block, like .card__title or .card__image.

Modifier with --

A version or state of a block or element, like .card--featured or .btn--disabled.

Flat, low specificity

Every rule is a single class, so styles are predictable and easy to override.

See it in code

Walk through the code

html

1<article class="card card--featured">2  <img class="card__image" src="goa.webp" alt="Beach in Goa at sunset" />3  <h3 class="card__title">Goa on a Student Budget</h3>4  <a class="card__link" href="/goa">Read more</a>5</article>6 7<style>8  .card { border: 1px solid #eee; border-radius: 12px; }9  .card--featured { border-color: #ec4899; }10  .card__image { width: 100%; border-radius: 12px 12px 0 0; }11  .card__title { font-size: 1.25rem; }12</style>

1/4Block plus modifier on the same element: a featured card.

The modifier class sits alongside the block class. You never write .card--featured on its own.

Save yourself the pain

Common mistakes

Oops

Chaining elements like .card__body__title__icon.

Do this instead

Elements belong to the block, not to each other. Use .card__icon.

Oops

Writing nested selectors like .card .card__title.

Do this instead

Just use .card__title. The name already says where it belongs.

Your mission

BEM-ify a navbar

~20 min

Quick check

In BEM, what does the class .menu__item--active mean?

Go deeper

1Refactor one component's class names into BEM (`block__element--modifier`). Validate your understanding by applying it in a small practical example.
2Notice how BEM avoids nesting-based specificity wars. Validate your understanding by applying it in a small practical example.
3Compare BEM's verbosity against utility-class approaches like Tailwind.