Учимся любить БЭМ

Должен признаться: когда я впервые услышал о БЭМ, я подумал, что идея как-то не очень. Зачем так усложнять именование в CSS? Можно же называть классы проще: .form-group или .accordion. Какой смысл заморачиваться классами вроде .accordion__child и .accordion__child--highlighted?

В январе я работал над одним проектом с моим коллегой Йелле (Jelle), который в своем коде использует БЭМ-синтаксис. Сначала я сомневался в этом подходе, но, так как он был ведущим HTML/CSS разработчиком проекта, ему и карты в руки.

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

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

Логика БЭМ (Блок — Элемент — Модификатор):

• Есть блок, например, .my-element
• Есть элемент, например, .my-element__sub-element (два подчёркивания подряд обозначают дочерний элемент)
• И, может быть, модификатор, например, .my-element__sub-element—-highlighted (двойной дефис означает модификатор состояния).

Более развёрнутое объяснение можно найти тут.

Это даёт следующие преимущества:

• Логика именования позволяет сразу понять что именно обозначает конкретный CSS-класс.

• Каждый элемент находится в пространстве имён, что делает поиск и замену в рамках проекта более надёжным.

• Это упрощает понимание того, какой CSS можно изменять.

• Уменьшается вероятность конфликта между классами.

• Выбор HTML-тегов более-менее независим от CSS (при условии, что в начале CSS-файла находится ресет).

• Повышается производительность. Так как CSS-селекторы читаются справа налево, а БЭМ основан на использовании одного класса (не на вложенности SCSS), он работает быстрее.

• Уменьшается количество проблем с весом селекторов, так как обычно используется только имя класса, без учёта вложенности.

• Компоненты легко переносятся из проекта в проект. На практике это означает улучшение качества кода и повышение скорости разработки.

Конечно, у БЭМ есть свои недостатки:

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

• Разметка может содержать массу классов, которые, на самом деле, делают совсем немного (так что HTML, опять таки, начинает выглядеть жутковато).

• Фреймворки, например, Bootstrap, не содержат БЭМ, так что попытка комбинировать их с БЭМ может привести к неоднородности в пространстве имён и возникновению путаницы.

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

Для больших проектов БЭМ — отличный выбор. Он потребует некоторых усилий в начале работы, но сэкономит массу времени в долгосрочной перспективе. Так что вперёд!