Block, Element, Modifier

BEM is the most popular class naming methodology, invented at Yandex. It helps make components independent.

Three Pillars:

  • Block: Independent component (e.g., header, button, card).
  • Element: Component part (card__title, card__image). Written with two underscores.
  • Modifier: Property or state (button--large, button--disabled). Written with two hyphens.
/* Example in HTML: <button class="btn btn--blue"> */
.btn { ... }
.btn--blue { background: blue; }

Important: Element cannot exist separately from block. You can't write just __title, only card__title.