ИСПОЛЬЗОВАНИЕ ТЕХНОЛОГИИ БЭМ ДЛЯ РАЗРАБОТКИ САЙТОВ - Студенческий научный форум

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

ИСПОЛЬЗОВАНИЕ ТЕХНОЛОГИИ БЭМ ДЛЯ РАЗРАБОТКИ САЙТОВ

Бурых М.А. 1, Негребецкая В.И. 1
1ФГБОУ ВО «Курский государственный университет», колледж коммерции, технологий и сервиса
 Комментарии
Текст работы размещён без изображений и формул.
Полная версия работы доступна во вкладке "Файлы работы" в формате PDF
В настоящее время существует достаточное количество технологий, позволяющих верстать сайты. Для создания дизайна верстальщики привлекают 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, что увеличит скорость разработки и упростит понимание кода новыми разработчиками. При этом используется только соглашение об именовании элементов без какого-либо дополнительного инструментария. Для того чтобы применить идеи БЭМ в своем проекте нам достаточно того стека технологий который там уже наверняка есть.

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

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

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

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

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

Просмотров работы: 351