Почему БЭМ? Самая важная выжимка - разбор методологии

Блок, элемент, модификатор. Создатель Яндекс.

0 33

Почему БЭМ? Самая важная выжимка - разбор методологии

Методология

Блок, элемент, модификатор. Создатель Яндекс.

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

Это нужно знать на собеседованиях и в работе. Единые правила создания и хранения кода, упрощают работу в команде.

Частая проблема, как назвать класс?

С помощью блока в БЭМ, мы избегаем дублирование в стилях. Название блока должно отвечать на вопрос «что это?» и он должен быть независим. Отступы и расположения используем внутри блока.

Элемент тоже отвечает на вопрос -«что это?». Добавляем названия блока __ (два нижних подчёркивания)и пишем название элемента. Когда блок, а когда элемент? Элемент может использоваться повторно и не зависеть от реализации других компонентов. Может ли он использоваться без своих родителей? Если да, то это блок. Если нет - это элемент. С блоке, в названии класса, можно указать и дочерний элемент:

<body class="page"> <header class="header page__header"> </header>

Где header - это отдельный блок и он при этом также является элементом своего родительского блока. И поэтому мы ему добавляем не только header, но и page__header. Так мы показываем что header является элементом блока pagе, а также родителем для дочерних его элементов.

Это называется микс. Они помогают совмещать поведение и стили нескольких бэм-сущностей без дублирования кода.

Модификатор. Определяет внешний вид, состояние или поведение блока или элемента. Отвечает на вопрос - "какой размер? какой цвет?"

Чем отличается от других?

Отделяется от имени блока или имени элемента _(одним подчёркиванием). Пример кнопок, которые используется во многих местах .button_red.

Примеры использования:

Без БЭМ:

<div> <h3>Заголовок</h3> <div>Текст</div> <button>Кнопка</button> </div>

с БЭМ:

<div class="header"> <h3 class="header__title">Заголовок</h3> <div class="header__text">Текст</div> <button class="header__button">Кнопка</button> </div>

Теперь эти классы легко решают сразу две задачи: во-первых, благодаря уникальным классам стили для них никогда не пересекутся с другими подобными элементами на странице, а во-вторых, по таким классам сразу видно, что это элементы блока .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 по БЭМ.

Вывод:

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

Присоединяйтесь в мой телеграмм-канал, чтобы быстрее узнавать о полезных статьях и других важных моментов в мире программирования.