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