CSS — соглашение об именах БЭМ

Предисловие:

В последнее время команде приходится учитывать единый стиль кода.

1 Что такое соглашение об именах БЭМ

Бем — это аббревиатура от блока, элемента и модификатора, методологии внешнего интерфейса CSS, предложенной командой Яндекса.

- тире: используется только как дефис, обозначающий знак соединения между несколькими словами блока или подэлемента.

__Двойное подчеркивание: двойное подчеркивание используется для соединения блоков и подэлементов блоков.

_ Одиночное подчеркивание: одно подчеркивание используется для описания состояния блока или подэлемента блока.

БЭМ — это простое и очень полезное соглашение об именах. Сделайте свой интерфейсный код более легким для чтения и понимания, упростите совместную работу, упростите управление, сделайте его более надежным, явным и строгим.

1.1 Схема наименования БЭМ

Шаблон для соглашения об именах БЭМ:

.block {}

.block__element {}

.block--modifier {}

Каждое имя блока должно иметь пространство имен (префикс)
- blockПредставляет абстракцию или компонент более высокого уровня.
- block__elementПредставляет потомок .block, используемый для формирования полного .block в целом.
- block--modifierПредставляет разные состояния или разные версии .block .

Использование двух дефисов и знаков подчеркивания вместо одного означает, что ваши собственные блоки будут разделены одним дефисом. как:

.sub-block__element {}

.sub-block--modifier {}

1.2 Преимущества номенклатуры БЭМ

Ключ к БЭМ заключается в том, что можно получить больше описаний и более четкую структуру, а значение знака можно узнать из его названия. Таким образом, взглянув на атрибут класса в HTML-коде, вы можете узнать связь между элементами.

Пример общей номенклатуры:

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

Такой способ написания позволяет понять значение каждого элемента из структуры DOM и именования классов, но не может прояснить его реальное иерархическое отношение. При определении CSS вы также должны полагаться на иерархические селекторы, чтобы ограничить объем ограничений и избежать загрязнения стилей между компонентами.

Пример использования метода именования БЭМ:


<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

Благодаря методу именования БЭМ иерархия модулей проста и понятна, и нет необходимости делать слишком много иерархических выборов при написании CSS.

2 Как пользоваться номенклатурой БЭМ

2.1 Когда следует использовать формат БЭМ

Хитрость использования БЭМ заключается в том, что вы знаете, когда и что следует записывать в формате БЭМ.
Не везде следует использовать номенклатуру БЭМ. Формат БЭМ следует использовать, когда требуются явные ассоциативные связи модулей.
Например, если это просто общедоступный единый стиль, нет смысла использовать формат БЭМ:

.hide {
    display: none !important;
}

2.2 Использование формата БЭМ в препроцессоре CSS

Одна из ловушек БЭМ состоит в том, что названия длинные, некрасивые и плохо написанные. По сравнению с удобством формата БЭМ, мы должны смотреть на него объективно.
Более того, CSS обычно пишется на языке препроцессора, таком как LESS/SASS, и гораздо проще писать, используя его языковые возможности.

Возьмите МЕНЬШЕ в качестве примера:


.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

2.3 Использование формата БЭМ в компонентах популярных фреймворков

в популярном в настоящее времяVue.js / React / AngularВо внешних средах, таких как CSS, существуют реализации компиляции области действия на уровне компонентов CSS.Основной принцип заключается в использовании функции селектора атрибутов CSS для создания разных селекторов атрибутов для разных компонентов.
Когда вы решите написать эту локальную область видимости, в более мелких компонентах формат БЭМ может показаться менее важным. Но для общедоступных, глобальных определений стилей модулей по-прежнему рекомендуется формат БЭМ.
Кроме того, для общедоступных компонентов, выпущенных для внешнего мира, этот метод локальной области обычно не используется для определения стилей компонентов ради возможности настройки стилей. Здесь также проявляется использование формата БЭМ.

2.4 Избегайте формата .blockel1el2

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

3 Резюме

Одна из самых сложных частей БЭМ — знать, где начинается и заканчивается область видимости, и когда ее использовать или нет. По мере накопления опыта непрерывного использования вы постепенно узнаете, как его использовать, и эти проблемы больше не будут проблемой. Нет хороших или плохих технологий, правильная — самая лучшая.