БЭМ. Что он нам дает. – купить за 1 сом КР | InSales.kg платформа управления онлайн продажами

БЭМ. Что он нам дает.

Декларативность

Весь подход БЭМ является декларативным.

Это означит, что

  • всем сущностям соответствует одно толкование
  • мы явно задаем поведение и состояния блока
  • разделены классы и сущности, отвечающие за поведение и внешний вид

Независимость

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

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

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

Пример

Описывая многоуровневое меню с точки зрения БЭМ, мы оперируем каждым уровнем такого меню как независимым и самодостаточным блоком. Это дает возможность как прозрачно повторить поведение и стилистику меню вниз по уровням, так и менять их с минимальными затратами по времени.

Повторяемость

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

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

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

Гибкость верстки

За счет того, что в БЭМ при описании стилей и скриптов в первую очередь оперируют классами DOM-элемента, мы свободны в выборе тегов для верстки конкретных блоков. Так например, мы можем сверстать меню по традиционной методике с применением списков ul/ol, так и на div'ах, если мы этого захотим. При этом мы будем уверены, что данные меню будут иметь одинаковое поведение и вид.

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

Максимальная понятность и читаемость кода

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

Так же сводятся к минимум возможность случайно изменить или сломать поведение других элементов на сайте "поправив" стиль или поведение конкретного тега/класса/селектора. Это происходит за счет того, что конкретные селекторы четко связаны с конкретным блоком и вне его пределов не могут использоваться.

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

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

Оценки: 0

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