Изучаем БЭМ-методологию Яндекса

Веб

Что такое БЭМ?

БЭМ расшифровывается как Блок-Элемент-Модификатор. Смысл этих терминов раскрыт ниже.

Объектно-ориентированное программирование — парадигма, применимая во многих языках. ООП является одним из самых распространенных примеров методологии в программировании.

Сходно с ООП, методология БЭМ – это и набор паттернов, и способ описывать действительность при помощи кода и размышлять о сущностях вне зависимости от того, на каком языке программирования реализуется проект.

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

БЭМ-методология была разработана в Яндексе для решения следующих задач:

  • Типовые проекты должны разрабатываться быстро, но жить долго. Необходимо уметь за короткий срок создавать проект, архитектура которого позволит без труда поддерживать и развивать его долгие годы.
  • Над проектом работает много людей. Необходимо эффективно организовывать работу команд: как из двух разработчиков, так и из десятков.
  • Масштабируемость команд. Добавление новых людей в команду должно улучшать её производительность. Рациональнее максимально быстро вводить новых разработчиков в курс дела и выделять им собственные зоны ответственности. Чтобы с одним и тем же кодом можно было работать долгое время и разным составом команды, код должен быть хорошо структурирован.
  • Повторное использование кода. Работа над каждым новым проектом или элементом интерфейса не должна начинаться с нуля. Если внутри компании прежде уже выполнялась похожая задача, необходимо максимально эффективно задействовать имеющийся код. У кода не должно быть контекстной зависимости, его должно быть легко переносить из одного места в другое.

 

Основы БЭМ

Семантика — это фундамент веб-разработки, но различные фронтенд-технологии используют разные семантические модели. Современное веб-приложение на уровне HTML чаще всего просто нагромождение тегов div и span. CSS как технология вообще не предлагает какой-либо структуры. Высокоуровневые JavaScript-компоненты используют те или иные абстракции, но они слабо связаны с CSS или HTML-разметкой. С точки зрения дизайнеров и UX-специалистов, интерфейсы вообще описываются терминами, далекими от технической реализации. Тем не менее все эти предметные области мы используем вместе. Самое время вспомнить про БЭМ: ведь это общая семантическая модель для разметки, стилей, кода и UX. Посмотрим поближе.

 

Блоки

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

  • заголовок
  • кнопка
  • навигационное меню

Чтобы задать блок, нужно придумать ему имя и определить его назначение. В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока (например, разные кнопки или несколько меню). Любой веб-интерфейс можно описать как иерархическую структуру блоков. Простейший пример — само HTML-описание страницы, если представить, что каждый тег — это блок. Правда, с точки зрения семантики это малоосмысленно, потому что HTML был разработан для представления и оформления текстов, а не интерактивных веб-приложений.

 

Элементы

Элемент — это часть блока, связанная с ним и по смыслу, и функционально. Элемент не существует и не используется без блока, к которому относится. Но не у всех блоков должны быть элементы.

Примеры элементов:

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

У элементов тоже есть названия. Если внутри блока несколько одинаковых элементов, то они идут под одним именем (например, ячейки таблицы или пункты списка). Элементы определяются по смыслу, а не исходя из HTML-вёрстки блока; так, отдельный элемент может быть представлен сложной HTML-структурой.

 

Модификаторы

Модификаторы — флаги у блоков или элементов, они определяют свойства или состояния. Модификаторы бывают булевыми (например, visible: true или false) или или представляют собой пару «ключ — значение» (code>size: large, medium, small). Это чем-то похоже на атрибуты в HTML, но всё-таки не то же самое. У сущности может быть несколько модификаторов, если эти модификаторы описывают разные вещи.

 

Блоки в DOM

Как использовать БЭМ, если мы всё ещё вынуждены писать HTML? Нужно соглашение об именовании, которое свяжет DOM-узлы с БЭМ-сущностями. Для задания этой связи БЭМ использует CSS-классы. При этом блоки, элементы и модификаторы не размещаются на DOM-узлах эксклюзивно; на одном теге может быть определено сразу несколько блоков, либо же элемент блока может быть объединен с контейнером другого блока. Использование одного и того же DOM-узла для размещения нескольких сущностей называется «микс». Помните, что миксы сделаны для удобства, совмещать можно только совместимое: не превращайте всё в кашу, смешивая блоки и элементы.

 

Дерево БЭМ (BEM tree)

Формируя документ из БЭМ-сущностей, начиная с корневого блока (<body> или даже <html>) и заканчивая глубоко вложенными блоками, вы создаёте семантический слой поверх существующей DOM-структуры. Этот слой называется БЭМ-деревом (BEM tree). БЭМ-дерево даёт возможность взаимодействовать с целым документом в терминах БЭМ, с точки зрения семантики, абстрагируясь от особенностей DOM-реализации.

 

Чем привлекателен CSS по БЭМ-методологии

Достаточно одного класса!
Нередко CSS сильно зависит от структуры документа. Меняется структура — ломается CSS. С BEM мы перестаём использовать имена тегов и ID, а опираемся только на имена классов. Это позволяет нам минимально зависеть от структуры документа.

Специфичность CSS-правил: проблема и решение
Большие объёмы CSS сложно поддерживать в том числе из-за того, что они могут взаимно влиять друг на друга, порой непредсказуемо доопределяя или переопределяя уже имеющиеся правила.

У этой «проблемы» есть имя: специфичность CSS-правил. Исходно, наличие как имён тегов, так и идентификаторов меняет специфичность правил таким образом, что при наследовании свойств (которое используется в CSS очень часто) переопределение правил возможно только с селекторами той же самой или более высокой специфичности. Проекты, сделанные на БЭМ, практически не страдают от этой проблемы.

1 комментарий
0B8uAORUAmrIObE9QZ1U5QW8xakE
Есть примеры
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.