Именование классов

Эта страница находится в процессе написания, что-то ещё допишется, что-то — поменяется

Блоки

Блоки нужно стараться называть одним словом. По сути, название блока — существительное.

.button — стандартный блок.

Префиксная модификация блоков

Префиксы у блоков записываются через дефис.

.pseudo-button — пример префиксной модификации.

Если нужно создать новый блок, по сути являющимся модификацией другого, но при этом все стили для которого прописываются с ноля, создаётся не модификатор по БЭМ, а новый блок с префиксным модифицированием: .action-button (это, по сути, аналог .button.button_theme_action).

Правило большого пальца — если модификация статичная, то есть не может быть ситуации когда нужно будет снять или повесить модификатор на исходный блок, то нужно создавать префиксно-модифицированный блок.

Пространства имён

Пространство имён, по сути — тот же префиксный модификатор. Содаётся для избежания конфиктов с уже имеющимися блоками (в БЭМ так, например, появилась .b- нотация). Также вполне можно использовать название проекта в качестве пространства имён: .mail-button.

Пространство имён должно всегда идти перед всеми остальными префиксными модификациями — .mail-pseudo-button.

Сложномодифицированные блоки

Если возникает желание создать блок с больше чем двумя префиксными модификациями, то стоит задуматься. Чаще всего будет иметь смысл создание нового именованного блока, либо же использование элемента структуры.

Например, допустимо создать блок .small-pseudo-button, но вот .small-flying-pseudo-button — уже за гранью. При этом, с большой вероятностью, подобные кнопки будут использоваться только в определённом контексте, поэтому вполне возможно не создавать новый «блок» для них, а использовать соответствующие стили для структурного элемента. Скажем, это может быть элемент тулбара, в этом случае блок можно назвать .toolbar-button.

Другое решение подобной проблемы — пойти поговорить с дизайнером на предмет того, действительно ли в данном конкретном месте нужна настолько специфичная кнопка, и нельзя ли использовать что-то, что уже есть вместо неё.

«Элементы»

Как таковых элементов (в БЭМ-терминологии) должно быть минимальное количество. Поэтому нотация элементов — постфиксная модификация через дефис.

.button-content — пример подобного элемента.

Надо стремиться к тому, чтобы элементы максимально были похожи на блоки, то есть могли использоваться независимо. И если есть, например, два блока: .action-button и .pseudo-button, то вложенный в них элемент будет иметь одно название — .button-content, а не два (.action-button__content и .pseudo-button__content).

Это делается для того, чтобы можно было в любой момент пойти и использовать «элемент» в любом другом контексте, то есть как блок.

Глобальные модификаторы

Для многих динамических вещей можно использовать глобальные модификаторы. Формат простой — это класс, начинающийся с .is- — такие модификаторы одинаково применимы к любым блокам, поэтому не содержат в себе имени конкретного блока;

.is-hidden — пример подобного глобального модификатора.

Стили глобальных модификаторов в большинстве случаев должны быть «важными» — !important, на то они и глобальные.

По сути, глобальные модификаторы представляют из себя булевые состояния — либо блок имеет какое-то свойство, либо не имеет.

Можно создавать много разных модификаторов, различающихся по смыслу, например:

• .is-disabled — «выключенное» состояние.
• .is-current — «текущее» состояние, как checked у радиокнопок.
• .is-selected — «выбранное» состояние, как checked у чекбоксов.

Контентные модификаторы

Почти как префиксные или глобальные — задаются префиксами .with- или .without-.

Используются в случаях когда нужно задать блоку (или детям блока) какие-то стили в зависимости от того, какое у блока есть содержимое. Например, если у кнопки есть иконка внутри, это будет .button.with-icon.

Локальные модификаторы

Локальные модификаторы — то, чем являются модификаторы в БЭМ, записываются постфиксом после имени блока через подчёркивание.

.icon_remove, например.

На самом деле, случаев, в которых можно применять подобные модификаторы — не так много, ведь уже есть возможность использовать префиксное модифицирование, или же глобальные и контентные модификаторы.

Основное поле применения — когда у блока может быть очень много однотипных модификаций, например, иконки в тулбаре — toolbar-icon_compose.

Другой случай — именованные блоки. Локальные модификаторы вполне можно использовать вместо айдишников в CSS: когда есть какое-то меню с пунктами .menu-item, пункты меню, относящиеся к разным страницам, можно назывть с локальными модификаторами — .menu-item.menu-item_about.

To be continued…