Соглашения по именованию
Имя блока формируется как префикс-имя-блока.
Примеры
b-menu
b-popup
i-popup
Мы используем два вида префиксов, которые позволяют определить назначение блока.
b- (от block)
Префикс блока с визуальным представлением на странице.
Пример
Попап с тенью имеет конкретное визуальное представление. Может иметь или не
иметь хвостик или закрывающий крестик. Может быть разных цветов. Может отображаться в разных направлениях.
i- (от include)
Префикс абстрактного блока, который не существует сам по себе, но используется
для построения других блоков.
Или префикс блока не имеющего визуального представления и реализующего какую-то
функциональность.
Пример
Блок i-popup не имеет конкретного визуального
представления. Хранит в себе функциональность, на основе которой строится блок
b-popup. Без блока i-popup
блок b-popup не существует.
Полное имя элемента формируется так, чтобы из него можно было определить
принадлежность данного элемента к конкретному блоку.
Полное имя элемента создается по схеме:
b-имя-блока__имя-элемента.
Примеры
b-menu__item
b-popup__content
Полное имя модификатора блока формируется так, чтобы из него можно было определить принадлежность данного модификатора к конкретному блоку. Полное имя модификатора блока создается по схеме: b-имя-блока_имя-модификатора_значение-модификатора.
Примеры
b-menu_layout_horiz
b-menu_layout_vert
b-popup_direction_up
Полное имя модификатора элемента формируется так, чтобы из него можно было определить принадлежность данного модификатора к конкретному элементу конкретного блока. Полное имя модификатора элемента создается по схеме: b-имя-блока__имя-элемента_имя-модификатора_значение-модификатора.
Примеры
b-menu__item_state_current
b-popupa__content_visibile_yes
b-popupa__content_visibile_no