X Международная студенческая научная конференция Студенческий научный форум - 2018

В настоящее время существует достаточное количество технологий, позволяющих верстать сайты. Для создания дизайна верстальщики привлекают 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, что увеличит скорость разработки и упростит понимание кода новыми разработчиками. При этом используется только соглашение об именовании элементов без какого-либо дополнительного инструментария. Для того чтобы применить идеи БЭМ в своем проекте нам достаточно того стека технологий который там уже наверняка есть.

Список использованных источников

БЭМ [Электронный ресурс] https://tech.yandex.ru/bem/ Дата обращения: 12.12.2017

БЭМ [Электронный ресурс] https://ru.wikipedia.org/wiki/БЭМ Дата обращения: 12.12.2017

БЭМ для верстальщиков [Электронный ресурс] http://webtricks-master.ru/bem/bem-dlya-verstalshhikov-s-chego-nachat/ Дата обращения: 12.12.2017

Вкладывание элементов в элементы и другие тонкости [Электронный ресурс] https://ru.bem.info/forum/158/ Дата обращения: 12.12.2017

Код для цитирования: Скопировать