Для чего нужна БЭМ-методология
История БЭМ
БЭМ (Блок, Элемент, Модификатор) вышла из яслей Яндекс. 5-10 лет назад верстка сайтов происходила статично. Страница писалась целиком, без каких-либо модулей или блоков. Скопировать и перенести с сайта на сайт было довольно проблематично. Был один файл CSS, один JS и пара статичных страниц HTML. В CSS использовались id, классы и теги. Любые малейшие изменения требуют огромного времени на рефакторинг кода.
#fotter div { color:#000; }
Основы БЭМ-методологии
В методологии страница разбивается на Блоки. Блоки состоят из отдельных Элементов, которые не могут быть использованы вне самого блока. А состояние или поведение элемента задается с помощью Модификатора.
Блок
Логически и функционально независимый компонент страницы. Блок полностью самодостаточен: у него может быть свое поведение, шаблоны, стили, документация и не только. Блоки могут использоваться в любом месте страницы, могут использоваться повторно, даже в другом проекте. Одни блоки можно вкладывать в другие, компоновать, использовать для создания более сложных блоков.
Элемент
Часть блока, которая не может использоваться в отрыве от него и имеет смысл только в рамках своего родителя. Элементы могут быть обязательными и опциональными. Работая с элементами, важно помнить правило: не рекомендуется создавать части элементов. Если вложить один элемент в другой, будет невозможно изменить внутреннюю структуру блока. Элементы нельзя поменять местами, удалить или добавить без корректировки существующего кода.
Модификатор
Свойство блока или элемента, которое меняет их внешний вид, состояние или поведение. Модификатор имеет имя и может иметь значение. Использование модификаторов опционально. У блока/элемента может быть несколько разных модификаторов одновременно. Так, например, с помощью модификатора можно изменить не только цвет меча, но и его функциональность.
Правила названий CSS-селекторов
Согласно БЭМ-методологии, блоки не уникальны и их всегда можно использовать повторно, поэтому в описании CSS-правил нельзя использовать id. Блок не должен зависеть от окружающих его блоков и не должен влиять на соседние блоки, поэтому в CSS отказались от:
Блок стал важной определяющей сущностью в именовании селекторов:
Правила имений сущностей
Пример (далее все примеры взяты из воронки):
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>
Достоинства БЭМ
Я вывел только основные из них, они позволяют максимально упростить жизнь рядовому программисту, верстальщику.
Ускорение разработки
Ускорение рефакторинга
Универсальная расширяемая система
Вывод
БЭМ-методология — это набор правил и рекомендаций по организации работы над проектом. Все части БЭМ-платформы интегрированы для совместной работы, но могут быть использованы и по отдельности. Каждая часть решает конкретную задачу и её можно настраивать под свой процесс и заменять на другие. Выбирайте наиболее подходящий способ для вашего проекта, экспериментируйте.
Back-end разработчик компании IT-Мастерская
Комментариев: " 3 "