BEM Example

Minimalist wristwatch New

Accessories

Minimalist Watch

A clean, everyday timepiece with a leather strap and sapphire crystal glass.

$129
Wireless headphones Best Seller

Electronics

Wireless Headphones

Premium noise-cancelling headphones with 30-hour battery life and rich bass.

$249
Running sneakers Sold Out

Footwear

Running Sneakers

Lightweight mesh upper with responsive cushioning for long-distance comfort.

$95

What is BEM?

BEM stands for Block, Element, Modifier. It is a naming convention for CSS classes that makes your stylesheets easier to read, understand, and scale. Every class name follows one simple pattern:

.block__element--modifier

B Block

A Block is a standalone, reusable component. It is meaningful on its own and doesn't depend on its surroundings. Think of it as the outermost container of a UI pattern.

In our card example
<article class="product-card">
  ...
</article>

product-card is the Block. It represents the entire card component. The name uses lowercase words joined by a single hyphen.

E Element

An Element is a part of a Block that has no meaning on its own. It is always tied to its Block and is separated by a double underscore (__).

In our card example
<h2 class="product-card__title">Minimalist Watch</h2>
<span class="product-card__price">$129</span>
<button class="product-card__button">Add to Cart</button>

__title, __price, and __button are all Elements of the product-card Block. They only make sense inside a product card.

Full element list in this example: __image-wrapper, __image, __badge, __body, __category, __title, __description, __footer, __price, __button

M Modifier

A Modifier changes the appearance or behavior of a Block or Element. It is separated by a double hyphen (--) and is always used alongside the base class, never alone.

Block-level modifier
<article class="product-card product-card--featured">

--featured adds a gold border to the card. Notice it sits next to the base product-card class—never replaces it.

Element-level modifier
<span class="product-card__badge product-card__badge--highlight">
  Best Seller
</span>

__badge--highlight changes the badge background to gold. Modifiers can apply to Elements too, not only Blocks.

? Why Use BEM?

  • Readability — Class names tell you exactly what something is and where it belongs.
  • No specificity wars — Every selector is a single class, keeping specificity flat and predictable.
  • Reusability — Blocks are self-contained, so you can drop them anywhere without side-effects.
  • Scalability — As your project grows, the naming convention keeps styles organized and conflict-free.

Quick Reference