foundation

BEM

Используйте именование block, element и modifier, чтобы связи в глобальном CSS были явными и предсказуемыми.

BEM (Block, Element, Modifier) именует глобальный CSS по владению компонентом: `block`, `block__element`, `block--modifier`. Селекторы остаются плоскими — ниже specificity и явные связи без build-time scoping.

					.card { }
.card__title { }
.card__body { }
.card--featured { }
.card--featured .card__title { } /* состояние block влияет на element */

BEM подходит командам с plain CSS или SCSS без CSS Modules. Изоляцию не навязывает — нужны дисциплина и review.

На интервью: BEM vs CSS Modules, utility CSS и глубокие вложенные селекторы в больших кодовых базах.

Типовые ошибки: каждый потомок объявляют element (раздутый API); модификаторы без ясного владения block.

Компромисс: многословные классы против grep-friendly глобального CSS с низкой specificity.

Чеклист:

Имена по block компонента, не только по региону страницы.
Селекторы на глубину одного block.
Модификаторы для вариантов и состояния.
Не «утекайте» внутренними elements между blocks.