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

02.03.2020 07:27:57

Это краткая заметка про имена классов при использовании методологии БЭМ для верстки 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 - отношение блоков (например, отступы).

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


Стоит отметить, что металлогения БЭМ (Блок-Элемент-Модификатор) разработана компанией Яндекс для быстрой разработки сайтов, поэтому она включает в семя еще ряд правил, подробнее можно ознакомиться: тут https://ru.bem.info/methodology/ и тут https://yandex.ru/dev/bem/

Есть системные пометки.

Категории: Web, CSS
Пометки: Металлогения BEM
Яндекс.Метрика