Использование технологии БЭМ для разработки сайтов

Размещено на http://www.allbest.ru/

Использование технологии БЭМ для разработки сайтов

архитектура блок элемент модификатор

Бурых М.А., Негребецкая В.И.

ФГБОУ ВО «Курский государственный университет», колледж коммерции, технологий и сервиса

Курск, Россия

В настоящее время существует достаточное количество технологий, позволяющих верстать сайты. Для создания дизайна верстальщики привлекают CSS. Любые сколь-нибудь сложные правки в связи с изменениями дизайна или с появлением новых страниц приводят к долгому рефакторингу, в самом запущенном случае - к дублированию стилей. При этом постоянно присутствует риск что-нибудь сломать в самом неожиданном месте. И рано или поздно разработчики теряют контроль над CSS кодом [1].

В связи с этим на сегодняшний день существует множество подходов к написанию стилей. Одна из наиболее интересных методологий родилась в Yandex - БЭМ (Блок Элемент Модификатор) - методология, которая предоставляет решение по созданию архитектуры проекта, web-разработки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов.

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

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

методологические рекомендации по разработке сайтов -- простые советы по организации проекта, который нужно сделать быстро, а поддерживать долгие годы;

? технологии и библиотеки с открытым исходным кодом -- готовая реализация рекомендаций БЭМ;

? инструменты для автоматизации работы с методологией БЭМ.

Можно отметить следующие возможности БЭМ:

? простая поддержка структуры кода при росте проекта;

? повторное использование кода;

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

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

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

Элемент - это составная часть блока. Элементы контекстно-зависимы:

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

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

Правила формирования имени БЭМ-сущности

? каждая БЭМ-сущность должна иметь свой класс;

CSS-свойства для блоков, элементов и модификаторов описыва-

ются только через классы;

? для разделения слов в именах используется дефис (-);

? элемент отделяется от блока двумя подчеркиваниями (__). Модификатор -- одним (_);

? имена БЭМ-сущностей записываются с помощью цифр и латинских букв в нижнем регистре.

С целью использования разных БЭМ-сущностей на одном DOM-узле применяют миксы, которые позволяют:

? совмещать поведение и стили нескольких БЭМ-сущностей без дублирования кода;

? создавать семантически новые компоненты интерфейса на основе имеющихся БЭМ-сущностей [4].

БЭМ предоставляет абстракцию над DOM-деревом. Блоки независимы друг от друга и инкапсулируют в себе всю функциональность и элементы. Не важно, какими HTML-тегами будет реализован блок -- div или form, разработчик всегда может изменить это или добавить дополнительные обёртки. Любые изменения не должны оказывать влияние на остальные блоки. При использовании данной технологии описывается приложение компонентами интерфейса, а не HTML-тегами.

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

Блоки могут быть реализованы в одной или нескольких технологиях, например [2]:

? поведение -- JavaScript, CoffeeScript;

? внешний вид -- CSS, Stylus, Sass;

? шаблоны -- Pug, Handlebars, XSL, BEMHTML, BH; ? документация -- Markdown, Wiki, XML.

Несмотря на имеющиеся преимущества, можно выделить следующие недостатки БЭМ:

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

? невозможность сложноструктурированных блоков;

? нет способа управлять связями между блоками;

? нет механизма расширения/дополнения языка.

? отсутствие механизма встраивания не БЭМ-объектов.

Хотя в настоящее время из всех подходов к разработке интерфейсов БЭМ-подход является наиболее эффективным, и он не лишён недостатков. Требуется усовершенствовать его методологическую базу, для этого, в частности, следует задействовать теорию проектирования пользовательских интерфейсов.

Таким образом, следование принципам БЭМ позволяет получить тот самый поддерживаемый и масштабируемый CSS, что увеличит скорость разработки и упростит понимание кода новыми разработчиками. При этом используется только соглашение об именовании элементов без какого-либо дополнительного инструментария. Для того чтобы применить идеи БЭМ в своем проекте нам достаточно того стека технологий который там уже наверняка есть.

Размещено на Allbest.ru