BEM

Abbreviation · Development

Definitions

  1. Block Element Modifier — a CSS naming convention that organizes class names as .block__element--modifier (e.g., .card__title--highlighted). Prevents specificity wars, makes relationships between HTML and CSS explicit, and scales well for large codebases. Developed by Yandex.

    In plain English: A naming system for CSS classes that uses double underscores and double dashes to show how elements relate to each other.

    Example: "Use .nav__item--active instead of .nav .item.active — BEM's flat specificity avoids the cascade wars."

Related Terms