Методология БЭМ разработана и внедрена в Яндексе в целях формирования оптимальных условий для создания сервисов различной функциональности. При этом учитывалась потребность быстрой реализации проектов, которая имеется у большинства WEB-студий, и долгосрочной поддержки сайтов, а также их модернизации. С её помощью создаются расширяемые компоненты интерфейса, которые можно многократно повторять, что упрощает процесс разработки.
Что такое БЭМ
БЭМ — это метод верстки, позиционируемый в качестве наиболее передового. Аббревиатура расшифровывается как «блок — элемент — модификатор». Подход даёт возможность придерживаться единых правил верстки, способствующих оперативно создавать интерфейсы, с лёгкостью и гибко проводить их настройку, без существенных проблем выполнять модификацию.
Блок
Главенствующий и функционально независимый элемент каждой страницы сайта. У него может иметься своё поведение, свои стили и шаблоны. Вся страница представляет собой набор связанных блоков. По мере необходимости в основной блок добавляются другие. Они могут находиться на странице, где угодно. Часто идентичные блоки переходят из одного проекта в другой.
Блок – это основа макета каждой страницы, в силу чего в комплексе наименований БЭМ его наименование находится на первом месте в классе. К примеру, nav – это традиционное общее название раздела инструментов навигации.
Элемент
Это часть блока, в силу чего не может применяться в отрыве от своего родителя, поэтому наследует некоторые его свойств. Внутрь элементов не следует вкладывать другие, несмотря на то, что имеется такая техническая возможность. Если появляется в том потребность, то следует сформировать отдельный блок. Рассмотрим это на примере традиционного блока nav:
- логотип и телефон могут быть элементами, поскольку внутри находятся только изображения и ссылки;
- меню же рекомендуется оформлять в виде вложенного блока. Хоть простое перечисление пунктов можно оформить и как элемент, однако, по мере развития сайта, меню тоже может потребоваться более сложное, поэтому блок здесь предпочтителен.
Модификатор
Речь идёт про свойства блока или элемента, такие как цвет, состояние, поведение. Применение модификаторов опционально. Кроме имени могут быть указаны и дополнительные значения.
Чем руководствовались инженеры Яндекса, когда создавали данную концепцию? Развитие компании было неразрывно с регулярным появлением задач по разработке и передаче пользователям множества онлайн-продуктов. Однако каждый программист и верстальщик в то время использовал свой стиль работы. Это мешало организации командных разработок. Тогда было принято решение породить единый метод вёрстки.
В его основу были положены следующие принципы:
- создаём простой и понятный код, с которым может разобраться не только автор, но и другие специалисты, что даст им возможность произвести изменения;
- сохранение повторяющихся блоков кода может происходить только в единой базе;
- каждый элемент называем так, чтобы это было понятно любому разработчику в команде;
- во всех проектах используем только единую структуру вёрстки и пользуемся едиными правилами.
В БЭМ HTML-разметку страницы можно создавать руками или программным образом. Чаще всего используются только основы метода, хотя на практике — это целый стек стандартов, который охватывает не только вёрстку, но и программирование на JavaScript и других языках. В настоящее время фреймворк i-bem.js, представляющий собой часть библиотеки bem-core, содержит максимальную реализацию БЭМ в JavaScript.
Представим себе статический сайт. Это грандиозный набор простых HTML-страниц, с которыми связаны файлами со стилями и скриптами. При необходимости внести в проект изменения, будет нужно «перелопатить» файлы и поменять их содержание вручную. Методологии, такие как БЭМ, упрощают процесс – достаточно изменить название класса или сделать его небольшое изменение. Кроме этого применение БЭМ даёт возможность сделать более структурированными CSS-файлы. Отпадает необходимость создавать множество блоков для какого-то элемента.
Какие задачи решает использование БЭМ-методологии
Методология bem задаёт правила по созданию имён CSS-селекторов, способные решить некоторые вопросы разработки:
- упрощение и документирование кода в нём самом;
- создание оптимальных условий для рефакторинга;
- код можно использовать повторно и при этом компоненты не окажут влияния друг на друга;
- набор сущностей может быть расположен на одном DOM-узле без копирования и вклеивания.
Основные правила верстки
- Применение модификаторов элементов и блоков обусловлено наличием реальных потребностей.
- Использовать их можно в любом количестве.
- Нужно иметь в виду важное ограничение — блоку и его элементу недопустимо присваивать различные значения одного модификатора.
Наименование модификатора должно характеризовать:
- то, как выглядит блок или элемент;
- состояние компонента;
- поведение.
Имя модификатора необходимо отделить от имени блока или элемента одним подчеркиванием (_) или двойным дефисом (—).
В ходе работы по БЭМ методологии нужно учитывать, что:
- генерируя название блоку или элементу нужно пытаться ответить на вопрос о том, что это такое;
- наименование элемента должно соответствовать конструкции «имя-блока__имя-элемента» (в качестве разделителя используется двойное подчеркивание);
- создавая имя модификатора нужно давать ответ на вопрос «Какой?»;
- наименование модификатора разделяется с названием блока или элемента одним подчеркиванием, что образует конструкцию «имя-блока_модификатор» или «имя-элемента_модификатор»;
- в стилях блока с элементами недопустимо наличие свойств, оказывающих влияние на внешнее окружение и размеры (отступы, границы, позиционирование). Если это необходимо, то нужно создать внешний блок-обертку, а уже ему задаются опасные свойства;
- в роли селекторов нельзя применять названия тегов и id, только классы, поскольку таким образом формируется взаимозаменяемость тегов, без необходимости изменять названия селекторов.
Преимущества БЭМ
- Структура проекта, которая понятна всем специалистам. Посмотрев на наименования селекторов, можно узнать особенности устройства и функциональность каждого класса.
- Формирование возможности работать с разными компонентами одновременно. Правила создания имён обеспечивают уникальность селекторов, а вероятность повторений в названиях модификаторов крайне мала. В силу этого разработчики получают возможность работать одновременно и не порождать коллизий.
- Оперативный онбординг новых членов команды. Освоение проекта займёт меньше времени, в силу того что компоненты документируют себя сами.
- Повышенная скорость разработки.
- Высокий уровень безопасности при включении в работу сторонних специалистов. Проект формируется из независимых блоков, в силу этого каждому вовлечённому разработчику не обязательно знать детали всего проекта. Специалисты обладают возможностью работать в рамках определённых компонентов. Это даёт возможность привлекать подрядчиков на большие проекты.
- Гибкость. Существует возможность использовать не всю методологию, а лишь её часть.
Минусы БЭМ
Далеко не все разработчики радушно относятся к БЭМ. Недовольных можно было встретить как в период начала массового распространения, так и в настоящее время.
В качестве негативных моментов указывают на:
- потребность применять блоки там, где они не нужны;
- в некоторых проектах, которым в реальности не требуется много кода, method БЭМ может заставить породить довольно громоздкие листинги;
- длинные именования элементов и модификаторов;
- многословные наименования сущностей могут существенно усложнить названия селекторов;
- некоторые разработчики считают, что метод пытается устранить идею каскадности;
- нечёткость толкования самого понятия «по БЭМ».
Заключение
В настоящее время разработчики не ставят задачи неукоснительно следовать правилам БЭМ. Данная методология разделилась на подход к работе с инструментами разработки и способ названия классов. Второй вариант применяется не только в РФ.
