i 1 🚚 Быстрая доставка. Описание, характеристики, отзывы. Смотрите все товары в разделе «БЭМ». "> i 1 | InSales.az - платформа управления онлайн продажами">

БЭМ. Принципы.

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

Она позволяет разрабатывать и оперировать такими блоками из проекта в проект с минимум доработок и изменений в коде.

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

На практике это значит, что предоставив блоку минимальную для его работу информацию, он будет работать одинаково, что на конкретном проекте, что на пустой странице.

Блок

Логически и функционально независимый компонент страницы. Блок объединяет в себе поведение (JavaScript), шаблоны, стили (CSS) и другие технологии реализации. Независимость блоков обеспечивает возможность их повторного использования, а также удобство в разработке и поддержке проекта.

Возможности блоков

Вложенность

Блоки могут быть вложены в любые другие блоки.

Например, блок head может включать логотип (logo), форму поиска (search) и блок авторизации (auth).


Свободное перемещение

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

Так, например, логотип и форму авторизации можно поменять местами. При этом вносить изменения в CSS или JavaScript-код блока не нужно.


Повторное использование

В интерфейсе может одновременно присутствовать несколько экземпляров одного и того же блока.

Элемент.

Составная часть блока, которая не может использоваться в отрыве от него.

Например, пункт меню вне контекста блока меню не используется, значит является элементом.

Модификатор.

БЭМ-сущность, определяющая внешний вид, состояние и поведение блока илиэлемента.

Использование модификаторов опционально.

По своей сути модификаторы похожи на атрибуты в HTML. Один и тот же блок выглядит по-разному благодаря применению модификатора.

БЭМ-сущность

БЭМ-сущностями называются блоки, элементы и модификаторы.

Это понятие может применяться как частное, если рассматривается отдельная БЭМ-сущность, и как собирательное для блоков, элементов и модификаторов.

Микс

Способ использования разных БЭМ-сущностей на одном DOM-узле.

Миксы позволяют:

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

Рассмотрим пример микса блока и элемента другого блока.

Допустим, в проекте ссылки реализованы блоком link. Необходимо сделать ссылками пункты меню. Существует несколько способов:

  • Создать модификатор для пункта меню, который превратит пункт в ссылку. Но в таком случае для реализации модификатора придется скопировать поведение и стили блока link. Это приведет к дублированию кода.

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

Подробнее о БЭМ вы можете прочитать здесь.

Оставить оценку

Оценка успешно отправлена.
Она будет проверена администратором перед публикацией.
Перед публикацией все оценки проходят модерацию

Оценки: 0

Остались вопросы?
Отправь тикет в техподдержку!
Еще нет своего магазина?
Создайте интернет-магазин на платформе InSales
Всё для продаж уже внутри!
Недавно просмотренные статьи