Металлогения БЭМ (Блок-Элемент-Модификатор) в CSS / HTML

Блок

Блок - это независимый элемент страницы, который может быть переиспользован на других страницах.

Его название записывается в нижнем регистре, каждое слово через тире/дефис (-)

Пример: top-banner

Имя блока должно отвечать на вопрос что это?, не уточняя его внешний вид.

В один блок может быть вложено сколько угодно других блоков.

Элемент

Элемент - это стотонная часть блока. Его название запивается как "имя блока" два подчеркивания (__) имя элемента.

Примеры: top-banner__title и menu-menu__item.

Название элемента тоже должно отвечать на вопрос что это? и не должно содержать иерархии (пути), т.е. нельзя писать top-banner__first-line__title.

Вместо этого стоит использовать: top-banner__subtitle

В один элемент может быть вложено сколько угодно других элементов, но все их имена привязываются к имени блока.

 
<div class="row">
    <div class="row__col">
        <div class="row__item"></div>
    </div>
</div>

Модификация

А вот модификация отвечает на вопросы: Какой? Как выглядит? Каково состояние?

Ее название записывается через одно нижнее тире (_) и добавляется к блоку или элементу как дополнительный css класс.

Получается: блок_модификатор
блок__элемент_модификатор

Например, menu__item_active, или menu_red-line

и уже для модификатора прописываются цвета, отступы и т.д. т.п.

Микс

Учитывая, что блоки могут быть вложенными, и зачастую нужно задать отношение между ними, то блоку задается два класса:

Пример: headet_first-line_title title

title - имя блока, который может быть переиспользован.
headet_first-line_title - отношение блоков (например, отступы).

это и называется микс.