Почему БЭМ? Самая важная выжимка - разбор методологии
Блок, элемент, модификатор. Создатель Яндекс.
БЭМ позволяет создавать абсолютно независимые блоки. Блоки и элементы получают уникальные имена, так что стили для одного элемента ничего не поломают в другом. БЭМ помогает легко придумывать любое количество классов, не повторяющихся между собой. Вся документация и сайт БЭМ вот тут:
Это нужно знать на собеседованиях и в работе. Единые правила создания и хранения кода, упрощают работу в команде.
Частая проблема, как назвать класс?
С помощью блока в БЭМ, мы избегаем дублирование в стилях. Название блока должно отвечать на вопрос «что это?» и он должен быть независим. Отступы и расположения используем внутри блока.
Элемент тоже отвечает на вопрос -«что это?». Добавляем названия блока __ (два нижних подчёркивания)и пишем название элемента. Когда блок, а когда элемент? Элемент может использоваться повторно и не зависеть от реализации других компонентов. Может ли он использоваться без своих родителей? Если да, то это блок. Если нет - это элемент. С блоке, в названии класса, можно указать и дочерний элемент:
Где header - это отдельный блок и он при этом также является элементом своего родительского блока. И поэтому мы ему добавляем не только header, но и page__header. Так мы показываем что header является элементом блока pagе, а также родителем для дочерних его элементов.
Это называется микс. Они помогают совмещать поведение и стили нескольких бэм-сущностей без дублирования кода.
Модификатор. Определяет внешний вид, состояние или поведение блока или элемента. Отвечает на вопрос - "какой размер? какой цвет?"
Чем отличается от других?
Отделяется от имени блока или имени элемента _(одним подчёркиванием). Пример кнопок, которые используется во многих местах .button_red.
Примеры использования:
Без БЭМ:
с БЭМ:
Теперь эти классы легко решают сразу две задачи: во-первых, благодаря уникальным классам стили для них никогда не пересекутся с другими подобными элементами на странице, а во-вторых, по таким классам сразу видно, что это элементы блока .header.
Как начать работать с БЭМ:
- Быстро начать разработку БЭМ-проекта можно с помощью project-stub — проекта с заранее предустановленными технологиями и инструментами. Начинать знакомство с ним стоит с помощью быстрого старта по БЭМ.
- Можно начать с правил именования CSS-селекторов. Это самый распространенный способ использования БЭМ-методологии.
- БЭМ-дерево.Типичная веб-разработка сводилась к тому, что мы писали HTML, затем нарезали его на шаблоны. При изменении дизайна приходилось менять HTML и шаблоны вручную. Чтобы избавиться от ручной работы, мы добавили новый уровень абстракции — БЭМ-дерево, которое позволяет работать со структурой веб-страницы в терминах блоков, элементов и модификаторов. БЭМ-дерево — это абстракция над DOM-деревом. БЭМ-дерево описывает все БЭМ-сущности, которые используются на странице, их состояния, порядок, вложенность. Оно может быть выражено любым форматом, который поддерживает древовидную структуру, например, XML или JSON.
- BEMJSON — JavaScript-формат, который позволяет работать в БЭМ-терминах. BEMJSON позволяет абстрагироваться от HTML-разметки и описывать страницу в терминах блоков, элементов и модификаторов. Мы описываем страницу, которую хотим получить в браузере в виде БЭМ-дерева и не пишем HTML руками: шаблонизатор BEMHTML обрабатывает BEMJSON и генерируют HTML.
- Сборка и оптимизация, чтобы созданный код мог работать в браузере. Собирать все файлы вручную неудобно, мы начинаем автоматизировать большинство повторяющихся процессов. Появляются bem-tools — набор инструментов для работы с файлами по БЭМ-методологии. Позже на смену bem-tools пришел ENB.Чтобы иметь возможность собрать разрозненные файлы, ничего не знающие друг о друге, используется технология DEPS, которая указывает зависимости одного блока от другого или от набора блоков. Инструменты БЭМ направлены на то, чтоб разработчик писал код так, как ему удобно, а оптимизацией и подключением в проект только нужных файлов в правильном порядке занимались роботы.
В БЭМ-платформе используются следующие сборщики:
- ENB. Подробно о том, как собрать БЭМ-проект с помощью ENB, см. в разделе Создаем проект по БЭМ.
- Gulp. Подробно о том, как собрать БЭМ-проект с помощью Gulp, см. вебинар Декларативный JavaScript по БЭМ.
Вывод:
Методология помогает придумать названия для классов. Вложить смысл в имена и сделать их информативными. Помогает избежать повторения классов. Когда код длинный, чем больше похожих по смыслу элементов, тем сложнее придумывать новые классы. Поэтому БЭМ сможет стать вашим постоянным помощником в работе. Удачи!
Присоединяйтесь в мой телеграмм-канал, чтобы быстрее узнавать о полезных статьях и других важных моментов в мире программирования.