Для чего нужна БЭМ-методология

• Разработчик при написании кода должен понимать что он сам или его коллеги должны разбираться в этом коде, и даже заглянув через год, он сразу должен понять что к чему.
• Любой модуль мы можем использовать повторно в любом другом проекте. И перенос должен составлять минимум времени (скопировал и вставил).
• Одна терминология внутри команды. Верстальщики, программисты, дизайнеры, даже менеджеры должны говорить на одном языке.
• Работа в Scrum подразумевает обмен спецов между командами. Данная методология значительно упрощает этот путь.
• И так как основная структура всех проектов едина, то переход на новый проект становится намного проще.

История БЭМ

БЭМ (Блок, Элемент, Модификатор) вышла из яслей Яндекс. 5-10 лет назад верстка сайтов происходила статично. Страница писалась целиком, без каких-либо модулей или блоков. Скопировать и перенести с сайта на сайт было довольно проблематично. Был один файл CSS, один JS и пара статичных страниц HTML.
В CSS использовались id, классы и теги.
Любые малейшие изменения требуют огромного времени на рефакторинг кода.

#fotter div
{
           color:#000;
}

Основы БЭМ-методологии

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

Блок

Логически и функционально независимый компонент страницы. Блок полностью самодостаточен: у него может быть свое поведение, шаблоны, стили, документация и не только. Блоки могут использоваться в любом месте страницы, могут использоваться повторно, даже в другом проекте. Одни блоки можно вкладывать в другие, компоновать, использовать для создания более сложных блоков.

Элемент

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

Модификатор

Свойство блока или элемента, которое меняет их внешний вид, состояние или поведение. Модификатор имеет имя и может иметь значение. Использование модификаторов опционально. У блока/элемента может быть несколько разных модификаторов одновременно. Так, например, с помощью модификатора можно изменить не только цвет меча, но и его функциональность.

Правила названий CSS-селекторов

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

• тегов;
• вложенных селекторов;
• глобального сброса правил для всей страницы.

Блок стал важной определяющей сущностью в именовании селекторов:

• полное имя элемента/модификатора формируется так, чтобы из него можно было определить принадлежность данного элемента/модификатора к конкретному блоку;
• по имени модификатора возможно определить принадлежность данного модификатора к конкретному элементу конкретного блока.

Правила имений сущностей

• Каждая БЭМ-сущность должна иметь свой класс.
• CSS-свойства для блоков, элементов и модификаторов описываются только через классы.
• Для разделения слов в именах используется дефис «-».
• Элемент отделяется от блока двумя подчеркиваниями «__». Модификатор — одним «_».
• Имена БЭМ-сущностей записываются с помощью цифр и латинских букв в нижнем регистре.

Пример (далее все примеры взяты из воронки):

• Имя блока — menu.
• Имя элемента блока — menu__search-form — элемент search-form блока menu.
• Имя модификатора блока — menu_them_blue — модификатор them в значении blue блока menu.
• Имя модификатора элемента — menu__search-form_enabled — булев модификатор enabled элемента search-form блока menu.

HTML <div class="menu menu_them_blue">...</div>
CSS .menu { color: blue; }

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

<div class="block-voron">
   <div class="block-voron__dell"></div>
      ...
</div>

В самом простом случае блок соответствует DOM-узлу. Но DOM-узел и блок — это не всегда одно и то же. На одном узле может совмещаться несколько сущностей. Это называется миксом.

С помощью миксов можно:

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

Например, в проекте кнопки реализованы блоком button. Необходимо поместить кнопку в форму (search-form) и задать для кнопки отступы. Для этого воспользуемся миксом блока button и элемента button блока search-form:

<div class="search-form">
   <div class="button search-form__button"></div>
</div>

Достоинства БЭМ

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

Ускорение разработки

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

Ускорение рефакторинга

• Работа c небольшими блоками кода.
• Технологии реализации одного блока не связаны с технологиями другого.

Универсальная расширяемая система

• Появились уровни переопределения.

Вывод

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

Back-end разработчик компании IT-Мастерская

Поделиться:

Комментариев: " 3 "