Соглашение по именованию CSS-селекторов

• Имена БЭМ-сущностей записываются с помощью латинских букв или цифр в нижнем регистре.
• Для разделения слов в именах используется дефис (-).
• Для хранения информации об именах блоков, элементов и модификаторов используются CSS-классы.

Правила формирования имен:

• блоков
• элементов
• модификаторов

Имя блока

Имя блока формируется по схеме block-name и задает пространство имен для элементов и модификаторов.

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

Появление блоков

Основное время разработчиков тратилось на создание HTML-структуры страницы и написание CSS-стилей для нее. JavaScript воспринимался лишь как сопутствующая технология.

Чтобы ускорить разработку, требовалось облегчить поддержку HTML и CSS отдельных компонентов страницы. Для этого мы ввели понятие блока.

Блоком называлась часть дизайна страницы или раскладки со своим специфическим и уникальным значением, определенным семантически или визуально.

В большинстве случаев любой компонент на странице (сложный или простой) рассматривался как блок. HTML-контейнер каждого блока получал уникальный CSS-класс с тем же именем, что и у блока.

Классам блоков мы добавили префиксы (b-, c-, g-), чтобы отличать их от внутренних классов:

• b- — block.

Независимый блок, может использоваться в любом месте страницы.

• с- — control.

Контрол (независимый блок), с которым ассоциирован JavaScript-объект, обеспечивающий его функциональность. Может использоваться в любом месте страницы.

• g- — global.

Глобальное определение, используется по необходимости. Количество сведено к минимуму.

Кроме префиксов использовались постфиксы, например:

• -nojs — no javascript.

Стиль применяется в отсутствие JavaScript. Если JavaScript включен, то при загрузке страницы вызывается метод init() в onload, и постфикс удаляется из всех классов. Таким образом «включался» JavaScript для блоков.

Пример

menu lang-switcher

HTML

<div class="menu">...</div>

CSS

.menu { 
  color: red; 
}

Имя элемента

Пространство имен, заданное именем блока, определяет принадлежность элемента к данному блоку. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Полное имя элемента создается по схеме:

block-name__elem-name

Если блок имеет несколько одинаковых элементов, как в случае пунктов меню, то все они будут иметь одинаковые имена menu__item.

Появление элементов

В HTML-контейнере, формирующем блок, некоторые узлы получали четкий CSS-класс. Это не только облегчило создание стилистических правил, независящих от имени тега, но и позволяло присваивать семантически значимую роль каждому узлу. Такие внутренние узлы мы назвали элементами блока, или просто элементами.

Ключевое различие между блоком и элементом в тот момент:

• элемент не может существовать вне контекста родительского блока;
• из блока нельзя извлечь ни один элемент.

Если элемент способен существовать вне блока, он становится блоком.

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

Элементы с большим количеством кода выделялись комментариями.

/* Head (begin) */ 
.b-head { … } 

/* Logo (begin) */ 
.b-head .logo { … } 
.b-head .logo a { … } 
/* Logo (end) */ 

/* Right side (begin) */ 
.b-head .right { … } 

/* Info (begin) */ 
.b-head .info { … } 
.b-head .info .exit a { … } 

/* Info (end) */ 

/* Search (begin) */ 
.b-head .search { … } 
.b-head .search div div, 
.b-head .search div div i { … } 

/* Search (end) */ 
/* Right side (end) */ 
/* Head (end) */

Важно! В методологии БЭМ не существует элементов элементов.

Пример

menu__item lang-switcher__lang-icon

HTML

<div class="menu"> 
  ... 
  <span class="menu__item"></span> 
</div>

CSS

.menu__item { 
  color: red; 
}

Имя модификатора

Пространство имен, заданное именем блока, определяет принадлежность модификатора к данному блоку или его элементу. Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Полное имя модификатора создается по схеме:

• Для булевых модификаторов — owner-name_mod-name.
• Для модификаторов вида «ключ-значение» — owner-name_mod-name_mod-val.

Важно! В методологии БЭМ модификатор не может использоваться в отрыве от своего владельца.

Модификатор блока

• Булевый модификатор. Значение такого модификатора не указывается. Полное имя создается по схеме: block-name_mod-name.

Пример

menu_hidden

• Модификатор типа «ключ — значение». Значение модификатора отделяется от имени одним подчеркиванием (_). Полное имя создается по схеме: block-name_mod-name_mod-val.

Пример

menu_theme_islands

HTML

<div class="menu menu_hidden">...</div> 
<div class="menu menu_theme_islands">...</div>

Неверная форма записи

<div class="menu_hidden">...</div>

В данном случае в записи отсутствует сам блок, на который влияет модификатор.

CSS

.menu_hidden { 
  display: none 
} 
.menu_theme_islands { 
  color: green; 
}

Модификатор элемента

• Булевый модификатор. Значение такого модификатора не указывается. Полное имя создается по схеме: block-name__elem-name_mod-name.

Пример

menu__item_visible

• Модификатор типа «ключ — значение». Значение модификатора отделяется от имени одним подчеркиванием (_). Полное имя создается по схеме: block-name__elem-name_mod-name_mod-val.

Пример

menu__item_type_radio

HTML

<div class="menu"> 
  ... 
  <span class="menu__item menu__item_visible menu__item_type_radio">...</span> 
</div>

CSS

.menu__item_type_radio { 
  color: blue; 
}