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

Имя блоков

Для имён блоков в библиотеке используются ключевые слова (преимущественно на английском языке), по значению которых можно понять, что это за блок.
Имя блока может состоять из нескольких слов, разделённых дефисом.

Префикс

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

b- (от block)

Префикс блока с визуальным представлением на странице.

Например:

  • b-menu-horiz

Имеет конкретное визуальное представление на странице.

i- (от include)

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

Например:

  • i-menu

Не имеет визуального представления на странице. Предоставляет функциональность, которая используется блоками b-menu-horiz и b-menu-vert.

Имя элемента

Полное имя элемента формируется так, чтобы из него можно было определить принадлежность данного элемента к конкретному блоку.
Полное имя элемента создается по схеме: b-имя-блока__имя-элмента

Например:

  • b-popup__content
  • b-menu-horiz__item

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

Полное имя модификатора блока формируется так, чтобы из него можно было определить принадлежность данного модификатора к конкретному блоку. Полное имя модификатора блока создается по схеме: b-имя-блока_имя-модификатора_значение-модификатора.

Например:

  • b-link_type_pseudo
  • b-popup_direction_up
  • b-menu-horiz_type_simple

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

Полное имя модификатора элемента формируется так, чтобы из него можно было определить принадлежность данного модификатора к конкретному элементу конкретного блока. Полное имя модификатора элемента создается по схеме: b-имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Например:

  • b-menu-horiz__item_state_current
  • b-menu-horiz__item_state_disabled