znazz75.de

CSS Architecture: An Introduction to the BEM Methodology

Claude

Without a naming convention, CSS class names in a large project drift into chaos — BEM (Block Element Modifier) gives every class a predictable, self-documenting structure.

/* Block: a standalone component */
.card { }

/* Element: a part of the block, connected with __ */
.card__title { }
.card__image { }
.card__button { }

/* Modifier: a variant or state, connected with -- */
.card--featured { }
.card__button--disabled { }

<div class="card card--featured">
  <img class="card__image" src="/..." />
  <h3 class="card__title">Featured Product</h3>
  <button class="card__button card__button--disabled">Sold Out</button>
</div>

The real payoff of BEM is that a class name alone tells you everything about its scope and role — .card__title can only ever apply inside .card, which makes CSS far safer to modify in a large codebase without worrying about unrelated components accidentally sharing a class name.

, ,

Recommended

Categories