Методология БЭМ — одна из самых популярных на данный момент, в основе которой лежит договоренность того, как разбивать интерфейс на определенные независимые блоки. Расшифровывается аббревиатура как «Блок Элемент Модификатор». Этот подход к web-разработке позволяет быстро создавать сайты с гибкой архитектурой. Он знаком многим, кто занимается HTML/CSS версткой, но, как по мне, не достаточно, чтобы значительно упростить жизнь и работу большинству моих коллег. Изобретённый в Яндексе, БЭМ постепенно проникает и в разработку других компаний.

Зачем нужен БЭМ?

Методология оказалась востребованной, поскольку разработка большого портала должна отвечать следующим принципам:

Типовые сайты требуют малых временных затрат для создания;
Проект должен существовать длительное время, поддерживаться и быть понятным разным поколениям разработчиков;
Нужно уметь легко масштабировать команду: на проекте может работать один человек, а может десять;
Внутри команды должны быть чёткие зоны ответственности;
Код должен быть таким, чтобы его можно было использовать повторно.

Развитие методологии и её «обкатка» сотнями разработчиков показала, что она подходит не только для больших порталов, но и для web-студий или других моделей разработки. Для применения методологии разрабатываются технические решения, не просто удовлетворяющие БЭМ, а имеющие отдельные преимущества. Это, например, «особенный» JavaScript. И JavaScript-шаблонизатор. И набор инструментов, реализованных на NodeJS.

Гарантированный прогресс

Каковы наши основные ожидания от использования БЭМ? Я бы выделил:

Отсутствие коллизий;
Отсутствие коллизий;
И еще раз отсутствие коллизий.

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

Читаемый и поддерживаемый код;
Переиспользование компонентов;
Простота тестирования;
Гармония с объектной природой JavaScript.

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

Имя БЭМ-сущности уникально. Во всех технологиях (CSS, JavaScript, HTML) одна и та же БЭМ-сущность всегда должна быть названа одинаково. Основная идея соглашения по именованию — вложить смысл в имена и сделать их максимально информативными для разработчика.

Можно сравнить одно и тоже имя CSS-селектора, написанное разными способами:

searchitemactive

search-item-active

searchItemActive

Чтобы понять смысл первого имени, нужно вчитаться в каждое слово. В последних двух примерах имя явно разделяется на логические части. Но ни одно из имен пока не помогает точно определить, что search — это блок, item — элемент, а active — модификатор. Чтобы имена сущностей были однозначными и понятными, в БЭМ были разработаны правила формирования имен БЭМ-сущностей.

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

block-name__elem-name_mod-name_mod-val

Имена записываются латиницей в нижнем регистре.

Для разделения слов в именах используется дефис (-).

Имя блока задает пространство имен для его элементов и модификаторов.

Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).

Значение булевых модификаторов в имени не указывается.

Важно! В методологии БЭМ не существует элементов элементов. Правила именования запрещают создавать элементы элементов, но в DOM-дереве элементы можно вкладывать друг в друга.

Имя блока

	 menu

HTML

	 <div class="menu">...</div>

CSS

	 .menu { color: red; }

Имя элемента

	 menu__item

Важно! Имена одинаковых элементов одного и того же блока совпадают. Например, все пункты в блоке меню называются menu__item.

HTML

	 <div class="menu">

...

	  <span class="menu__item"></span>
	 </div>

CSS

	 .menu__item { color: red; }

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

	 menu_hidden
	 menu_theme_islands

HTML

	 <div class="menu menu_hidden">...</div>
	 <div class="menu menu_theme_islands">...</div>

CSS

	 .menu_hidden { display: none; }
	 .menu_theme_islands { color: green; }

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

	 menu__item_visible
	 menu__item_type_radio

HTML

	 <div class="menu">
	  ...
	  <span class="menu__item menu__item_visible menu__item_type_radio">...</span>
	 </div>

CSS

	 .menu__item_visible {}
	 .menu__item_type_radio { color: blue; }

Как еще можно именовать

Описанные выше правила формирования имен — это классическая схема именования БЭМ-сущностей. Все инструменты БЭМ по умолчанию настроены на классическую схему.

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

Стиль Two Dashes (который используя я)

block-name__elem-name--mod-name--mod-val

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

Важно! Двойной дефис внутри комментария (--) может вызвать ошибки при валидации HTML-документа.

Так же имеються и другие стиле CamelCase, React, No-namespace о них подробную информацию можно найти в сети.

Ваша схема именования

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

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

Вот и всё. Если нам удасться сохранить главную ценность BЭM — изоляцию компонентом, то творить внутри самих компонентов можно будет всё что угодно. Если вы контролируете все корневые стили, то есть у вас весь-весь код разбит на пространства имён, и за их пределами селекторов нет, то вы достигли просветления и можете позволить себе всё.

Телеграм, обсуждения БЭМ https://t.me/bem_ru

следующая статья