Для чего нужен БЭМ в CSS?

БЭМ (Блок — Элемент — Модификатор) — методология именования классов, которая делает стили независимыми и понятными.

Как устроены имена

.card {}               /* блок — самостоятельный компонент */
.card__title {}        /* элемент — часть блока */
.card--featured {}     /* модификатор — вариант блока */
.card__title--small {} /* модификатор элемента */

Зачем он нужен

• Нет конфликтов имён — каждый класс принадлежит своему блоку.
• Низкая специфичность — все селекторы из одного класса, нет «гонки» и !important.
• Независимость от разметки — стили не завязаны на вложенность тегов.
• Читаемость — по имени класса понятно, к чему он относится.

Минусы

• длинные имена классов;
• держится на дисциплине команды;
• в компонентных фреймворках со scoped-стилями часть пользы уже даёт сборщик.

Коротко для собеседования

БЭМ — соглашение об именах block__element--modifier, которое изолирует стили, держит специфичность низкой и не зависит от структуры HTML.

Подробнее: БЭМ — Методология