How to organize CSS with BEM methodology

· Category: HTML & CSS

Short answer

BEM stands for Block, Element, Modifier. It structures CSS classes as .block, .block__element, and .block--modifier to create clear relationships and avoid specificity conflicts.

How it works

  • Block: A standalone component (e.g., .button).
  • Element: A part of a block that has no meaning on its own (e.g., .button__icon).
  • Modifier: A flag that changes appearance or behavior (e.g., .button--primary).

Example

<div class="card card--featured">
  <img class="card__image" src="photo.jpg" alt="..." />
  <h2 class="card__title">Title</h2>
  <p class="card__text">Description</p>
  <a class="card__link card__link--external" href="/">Read more</a>
</div>

.card { border: 1px solid #ccc; }
.card--featured { border-color: gold; }
.card__title { font-size: 1.25rem; }
.card__link--external::after { content: ' ↗'; }

Why it matters

BEM produces flat, low-specificity selectors that are easy to maintain and reuse. It scales well in teams because class names are self-documenting and scope is explicit.