БЭМ как концепция верстки

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

Примерно так выглядит код сайта, написанный без использования БЭМ:

 

А так выглядит код сайта, написанный по всем стандартам БЭМ:

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

• После завершения разработки большинство ключевых элементов уже создано и готово к использованию в любой части сайта. По этой причине доработки и изменения требуют значительно меньших трудозатрат, чем при классической solid верстке с большим количеством контекстных зависимостей и без ориентации на модульность.
• Также независимость модулей помогает избегать коллизий при доработках. Что такое коллизии? Это ситуация, когда изменяя оформление в одном месте, случайно затрагивается оформление совершенно в другом, неожиданном для разработчика, месте и в итоге в лучшем случае страдает только оформление, а в худшем - страница “разваливается”. Правки коллизий сильно увеличивают сроки (и соответственно цену) доработок. Также существует шанс пропустить коллизию, и тогда ошибка может долгое время жить на вашем сайте. 
• Код написанный по стандартам БЭМ является самодокументируемым, а значит при доработках разработчику, незнакомому с проектом, будет легче разобраться, как и что работает. Даже разработчик сайта через несколько месяцев не сможет вспомнить что за что отвечает и тут БЭМ значительно облегчит ему задачу.
  

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

Требования:

• Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

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

Требования:  

• Название элемента характеризует смысл («что это?» — «элемент»: item, «ссылка»: link), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big). 
• Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента.
• Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.
• Элемент — всегда часть блока и не должен использоваться отдельно от него.

Сущность, определяющая внешний вид или состояние блока либо элемента.

Требования:

• Название модификатора характеризует внешний вид («какой размер?», «какой цвет?» — «размер»: big, «цвет»: red) или состояние («чем отличается от прочих?» — «отключен»: disabled, «выбран»: selected).
• Структура полного имени модификатора соответствует схеме имя-блока_имя-модификатора или имя-блока__имя-элемента_имя-модификатора.
• Модификатор нельзя использовать самостоятельно. С точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента. Модификатор должен изменять вид, поведение или состояние сущности.
• В некоторых случаях модификатором можно обозначать контекст, в котором используется блок, если в данном контексте стили отличаются от стандартных. Например: в подвале кнопки отличаются по цвету/размеру от обычных, тогда можно использовать модификатор .button_footer.

Часто на одном html элементе требуется совмещать поведение и стили нескольких БЭМ сущностей. Например кнопка (блок .button) в форме обратной связи (блок .feedback) должна быть прижата к правому краю. Стиль отвечающий за позиционирование кнопки нельзя добавить на общий класс .button, который описывает поведение и внешний вид кнопок на всем сайте, т.к. тогда все кнопки на всем сайте "прижмуться" к правому краю, а нам это не нужно. В таком случае кнопке добавляется дополнительный класс .feedback__button, описывающий новую сущность - элемент “кнопка” блока обратной связи, и стиль позиционирования прописывается на данную новую сущность.

Вместо микса также допустимо использовать модификатор с названием контекста, где необходимо изменение стилей. В данном примере модификатор будет следующим - .button_feedback.

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

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

• Имена БЭМ-сущностей записываются с помощью латинских букв или цифр в нижнем регистре. 
  
• Для разделения слов в именах используется дефис (-).
• Имя элемента отделяется от имени блока двумя подчеркиваниями (__). Полное имя элемента создается по схеме: block-name__elem-name.
• Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_). Полное имя модификатора блока создается по схеме: block-name_mod-name. Полное имя модификатора элемента создается по схеме: block-name__elem-name_mod-name.

В нашей компании принято использовать альтернативный стиль наименования модификаторов, называемый “No-namespace”. Его суть состоит в том, что у модификаторов отсутствует название блока/элемента в названии, а для определения к какой сущности применен модификатор в css используется мультикласс. В итоге вместо традиционных class=”block-name block-name_mod” и .block-name_mod{}, получаются class=”block-name _mod” и .block-name._mod{}. Данный стиль укорачивает длинные названия модификаторов и упрощает работу с ними, а также повышает “вес” правил модификаторов, что также бывает полезным.

1. В CSS используются только классы, а также псевдоэлементы и псевдоклассы. Селекторы тегов, идентификаторов и атрибутов не используются.

2. Вложенные селекторы должны использоваться по минимуму и только в случае крайней необходимости. Вложенные селекторы увеличивают связность кода и сильно затрудняют его повторное использование. В большинстве случаев вместо вложенности необходимо использовать миксы или модификаторы. Исключение: воздействие модификатора блока на стили его элементов. К примеру у блока (.form) имеется модификатор цвета (.form_red), и для изменения цвета элементов данного блока мы можем и должны использовать вложенность .form_red .form__button{background: red;}

Мультиклассы (.class1.class2) должны использоваться по минимуму и только в случае крайней необходимости. Мультиклассы увеличивают связность кода и сильно затрудняют его повторное использование. Исключение: использование модификаторов со стилем “No-namespace”.

Заинтересованы? Вот еще несколько полезных ссылок:

• Методология БЭМ

• Быстрый старт

• CSS по БЭМ

• Какие проблемы решает БЭМ