Skip to content

Latest commit

 

History

History
111 lines (70 loc) · 6.48 KB

БЭМ.md

File metadata and controls

111 lines (70 loc) · 6.48 KB

БЭМ

Введение

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке, в основе которого лежит принцип разделения интерфейса на независимые блоки. БЭМ используется в Яндексе для разработки фронтенда.

БЭМ включает в себя:

  • Методологические рекомендации по разработке сайтов — простые советы по организации проекта, который нужно сделать быстро, а поддерживать долгие годы.
  • Технологии и библиотеки с открытым исходным кодом — готовая реализация рекомендаций БЭМ.
  • Инструменты для автоматизации работы с методологией БЭМ.

Возможности БЭМ:

  • Простая поддержка структуры кода при росте проекта.
  • Повторное использование кода.
  • Точечные изменения с минимальными затратами: обновление дизайна, добавление функциональных элементов и т. д.

Цель создания

БЭМ предлагает общую семантическую модель для всех технологий, использующихся во frontend разработке (HTML, CSS, JavaScript, шаблоны и др.)

Используя понятия «блок», «элемент» и «модификатор» можно описать древовидную структуру документа. Такое описание называется BEM tree и является семантическим представлением интерфейса, абстракцией над DOM tree.

Кто использует

  • Яндекс
  • BBC
  • The Guardian
  • LinkedIn
  • Udemy

Блок

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

Особенности:

  • Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big)
<div class="b-block">...</div>
.b-block { color: #042; }

Элемент

Элемент — это составная часть блока. Элементы контекстно-зависимы: они имеют смысл только в рамках своего блока. Элемент — не обязательная составляющая блока, небольшие блоки обходятся без элементов.

Особенности:

  • Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big)
  • Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__)
<div class="b-block">
    ...
    <span class="b-block__elem"></span>
</div>
/* BAD */ .b-block .b-block__elem { border: solid 1px #000; }
/* BAD */       div.b-block__elem { border: solid 1px #000; } 
/* GOOD  */        .b-block__elem { border: solid 1px #000; }

Модификатор

Модификатор — это свойство блока или элемента, задающее изменения в их внешнем виде или поведении. Модификатор может быть булевым (например, button_big) или парой ключ-значение (например, menu_type_bullet, menu_type_numbers). У блока или элемента может быть несколько модификаторов одновременно.

Особенности:

  • Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top)
  • Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)
<!-- GOOD --> <div class="b-block b-block--mod">...</div>
<!-- GOOD --> <div class="b-block b-block--size_xl b-block--shadow_yes">...</div>
<!-- BAD -->  <div class="b-block--mod">...</div>
.b-block--hidden { display: none; }
.b-block--mod .b-block__elem { display: none; }
.b-block__elem--mod { display: none; }

Полезные ссылки