BEM (Block Element Modifier)

Quick Overview

BEM is a naming system for CSS classes that helps you write code that is organized, readable, and easy to maintain.

• Block: A standalone component (e.g., card)
• Element: A part of a block (e.g., card__title)
• Modifier: A variant or state of a block or element (e.g., card—featured)

Example:

<div class="card card--featured">
  <h2 class="card__title">Hello World</h2>
</div>

---

Detailed Explanation for Beginners

BEM is simple once you understand the three building blocks: Block, Element, Modifier. Let’s break it down:

Blocks

• Represent independent components on your page.
• Examples: button, card, form, navbar, teaser, etc.
• They can exist on their own.

<div class="card">
  <h2 class="card__title">Welcome</h2>
</div>

Elements

• Elements are parts of a block.
• You write them as block__element.
• They cannot exist outside their block.

<div class="card">
  <h2 class="card__title">Hello World</h2>
  <p class="card__description">This is a description.</p>
</div>

Notice how card__title and card__description are clearly connected to the card block.

Modifiers

• Modifiers describe different states or variations of blocks or elements.
• Use block--modifier or block__element--modifier.
• Examples: active buttons, highlighted cards, hidden elements.

<div class="card card--featured">
  <h2 class="card__title">Featured Article</h2>
  <button class="card__button card__button--primary">Read More</button>
</div>

.card { border: 1px solid #ccc; }
.card--featured { border-color: gold; }
.card__button--primary { background-color: blue; color: white; }

---

Another Full Example

<div class="form form--login">
  <label class="form__label" for="username">Username</label>
  <input class="form__input form__input--error" type="text" id="username">
  <button class="form__button form__button--primary">Login</button>
</div>

.form { padding: 20px; border: 1px solid #ccc; }
.form--login { background-color: #f9f9f9; }
.form__input--error { border-color: red; }
.form__button--primary { background-color: blue; color: white; }

Everything is modular, readable, and scalable. You can tell the structure just by reading class names.

---

BEM as a Cupcake Bakery

Think of your UI as a bakery display filled with cupcakes.
BEM is simply a naming system to keep every cupcake, part, and variation perfectly organized.

Block = The Cupcake

A Block is a complete, standalone thing. It makes sense on its own.

Example:

• .cupcake → the entire cupcake component

You can pick it up, move it around, display it anywhere. It’s whole.

---

Elements = The Parts of the Cupcake

Elements only exist because the cupcake exists. They depend on the block.

Examples:

• .cupcake__frosting → frosting (part of the cupcake)
• .cupcake__cherry → cherry (only makes sense on a cupcake)

You (hopefully) would never see a .cupcake__cherry lying around without a cupcake.

---

Modifiers = Different Flavors or Styles

Modifiers adjust appearance or behavior. They do not create a new cupcake, they just change it slightly.

Block Modifiers

Changes the cupcake as a whole:

Example:

• .cupcake--chocolate → the whole cupcake is chocolate

Element Modifiers

Changes a specific part of the cupcake:

Example:

• .cupcake__frosting--pink → only the frosting is pink

Modifiers are options, not new components.

---

BEM Cheat Sheet: Good vs Bad

Generic class names

Bad

<div class="card">
  <h2 class="title">Welcome</h2>
</div>

Good

<div class="card">
  <h2 class="card__title">Welcome</h2>
</div>

Always prefix elements with the block name (block__element) to avoid collisions.

---

Using multiple unrelated class names for the same element

Bad

<button class="btn primary-btn">Click Me</button>

Good

<button class="button button--primary">Click Me</button>

Use one block with optional modifiers, don’t mix unrelated names.

---

Deep nesting in CSS instead of BEM

Bad

.card h2 { font-size: 2rem; }
.card p { color: gray; }

Good

.card__title { font-size: 2rem; }
.card__description { color: gray; }

Avoid relying on element selectors inside a block. BEM keeps it modular.

---

Using modifiers incorrectly for hierarchy

Bad

<div class="card__title--big">Hello</div>

Good

<div class="card__title card__title--large">Hello</div>

Modifiers describe state or variation, not hierarchy.

---

Elements outside their block

Bad

<h2 class="card__title">Standalone Title</h2>

Good

<div class="card">
  <h2 class="card__title">Title inside card</h2>
</div>

Elements should never exist without their block.

---

Using multiple levels of elements

Bad

<div class="card__header__title">Welcome</div>

Good

<div class="card__header">
  <h2 class="card__header-title">Welcome</h2>
</div>

BEM only allows one level of __element. Use meaningful names instead of chaining.

---