Что такое БЭМ и для чего он используется

Разработчики сайтов часто пишут, что используют БЭМ при вёрстке страниц. Конечно, для непосвящённого человека это выглядит, как что-то очень солидное и технологичное, что поднимет качество сайта до невиданных высот. Но на самом деле всё гораздо проще и на практике использование или игнорирование БЭМ ни на что не влияет. Давайте разберёмся подробнее, что же это такое и для чего нужно.

Что такое БЭМ

Когда разработчик пишет код страницы на HTML, он присваивает имена классов разным элементам, чтобы потом описать их свойства в CSS. Эти имена могут быть совершенно любыми – всё ограничивается только фантазией самого разработчика.

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

Поэтому БЭМ – это просто набор правил для написания структуры классов в коде HTML.

Общие принципы БЭМ

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

На странице могут быть отдельные части, которые можно просто скопировать и вставить в другое место. Это, например, секции, карточки, формы, и многое другое. Если писать стили для карточки с подчинением её какому-то блоку, то просто так переместить её в другое место не получится – придётся исправлять и дописывать новые правила для этой карточки.

При использовании БЭМ родительский блок имеет определённое название – класс, а имена вложенных в него элементов добавляются через префиксы.

Например, класс формы поиска может быть search, тогда классы полей внутри неё будут search__input, а кнопки – search__button. Для активной кнопки можно добавить класс search__button-active.

Форма search – самостоятельный блок, который на сайте может использоваться в любом месте и сколько угодно раз. Чтобы в другом месте изменить вид её элементов, используются модификаторы – им просто добавляются дополнительные классы, которые перебивают некоторые стили из уже написанных. Например, в такой же форме в футере можно изменить цвет кнопки с помощью добавления модификатора search__button-active--red.

Блоки по правилам БЭМ отделяются двумя нижними подчёркиваниями, элементы – дефисами, а модификаторы – двойными дефисами.

Такой принцип именования классов сначала кажется сложным и непонятным, но привыкнуть к нему можно.

Преимущества БЭМ

Строгая структура именования классов имеет некоторые положительные свойства:

• В проекте несложно разобраться – сразу видно, какой элемент в какой вложен, где родительский блок начинается и где заканчивается.
• БЭМ позволяет использовать все преимущества препроцессоров CSS, так как в них составные имена классов можно разделить на части. От этого код CSS становится более компактным и удобным для чтения.
• Единые правила помогают при командной работе над проектом – каждый участник пишет имена классов, согласно этим правилам. Иначе возможно повторение имён и появление ошибок, которые потом нужно искать и исправлять, что только замедлит работу.
• Удобно повторно использовать уже созданные блоки, только добавляя к ним при необходимости модификаторы.

Однако многие разработчики всё же не стремятся использовать БЭМ в своей работе, и тому тоже есть свои причины.

Недостатки БЭМ

Методология именования классов имеет довольно крупные недостатки:

• БЭМ не рекомендует использовать в CSS семантические теги. Например, вместо того чтобы задать стили заголовку статьи через тег h1, придётся писать ему отдельный класс в HTML «article__heading_level_1».
• Не получится задать один глобальный класс нескольким блокам. В названии класса пишется имя блока или элемента и вне блока его использовать уже нельзя. К примеру, у блока есть класс «sidebar-section_color_white», всё, что он делает – меняет цвет фона на белый, но применить его можно только к блоку sidebar-section. А чтобы другому блоку задать белый фон, ему придётся создавать свой класс.
• Очень длинные названия CSS классов, причём их приходится добавлять даже тем элементам, которые можно было бы пропустить. Вёрстка от этого становится трудночитаемой.
• Не все используют препроцессоры CSS, а в обычном CSS длинные имена так же делают код трудночитаемым. Иногда классы приходится писать много раз и из-за таких названий файл стилей становится ещё больше.

Есть и другие проблемы, которые только мешают разработчику.

Обязательно ли использовать БЭМ

Придерживаться правил БЭМ рекомендует Яндекс, хотя в целом эта система не считается общепринятой и обязательной. Использовать её или нет – выбор самого разработчика. Ведь это всего лишь правила по именованию классов для стилей.

Что даёт использование БЭМ? Если работа ведётся в команде, а проект большой, то это действительно поможет избежать проблем с названиями классов и может ускорить разработку. В команде всегда нужны единые правила.

Но если над проектом работает один человек, ему нет смысла соблюдать эти правила. Тем более, если это лендинг или небольшой сайт на несколько страниц. Длинные названия классов только увеличивают размер файлов и, соответственно, замедляют загрузку сайта – всё же это лишние килобайты, без которых вполне можно обойтись.

Да и в целом нет никаких строгих правил, которые бы обязывали использовать систему БЭМ. Верстать страницы можно как с ним, так и без него. Здесь просто нужно оценивать каждый проект индивидуально – иногда БЭМ даёт какие-то преимущества, а иногда нет.