"Блок. Элемент. Модификатор" - это методология, разработанная в Яндексе, рассматривающая функциональные или логические элементы сайта как самодостаточные блоки.
Она позволяет разрабатывать и оперировать такими блоками из проекта в проект с минимум доработок и изменений в коде.
В большинстве случаев, единожды разработав блок, его можно применять везде с изменением лишь внешнего вида и не заботиться о корректности работы базовых стилей, разметки html и скриптов, необходимых для его работы, в конкретном проекте.
На практике это значит, что предоставив блоку минимальную для его работу информацию, он будет работать одинаково, что на конкретном проекте, что на пустой странице.
Блок
Логически и функционально независимый компонент страницы. Блок объединяет в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.
Возможности блоков
Вложенность
Блоки могут быть вложены в любые другие блоки.
Например, блок head может включать логотип (logo), форму поиска (search) и блок авторизации (auth).
Свободное перемещение
Блоки можно перемещать в пределах одной страницы, разных страниц или проектов. Независимая реализация блока позволяет изменять его положение на странице и обеспечивает корректную работу и внешний вид.
Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно.
Повторное использование
В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока.
Элемент.
Составная часть блока, которая не может использоваться в отрыве от него.
Например, пункт меню вне контекста блока меню не используется, значит является элементом.
Модификатор.
БЭМ-сущность, определяющая внешний вид, состояние и поведение блока илиэлемента.
Использование модификаторов опционально.
По своей сути модификаторы похожи на атрибуты в HTML. Один и тот же блок выглядит по-разному благодаря применению модификатора.
БЭМ-сущность
БЭМ-сущностями называются блоки, элементы и модификаторы.
Это понятие может применяться как частное, если рассматривается отдельная БЭМ-сущность, и как собирательное для блоков, элементов и модификаторов.
Микс
Способ использования разных БЭМ-сущностей на одном DOM-узле.
Миксы позволяют:
Рассмотрим пример микса блока и элемента другого блока.
Допустим, в проекте ссылки реализованы блоком link. Необходимо сделать ссылками пункты меню. Существует несколько способов:
Создать модификатор для пункта меню, который превратит пункт в ссылку. Но в таком случае для реализации модификатора придется скопировать поведение и стили блока link. Это приведет к дублированию кода.
Воспользоваться миксом универсального блока link и элемента link блока menu. Микс двух БЭМ-сущностей позволит применить базовую функциональность ссылок из блока link и дополнительные CSS-правила из блока menu без копирования кода.
Подробнее о БЭМ вы можете прочитать здесь.
