Всем привет. С вами Corvax. Все чаще в вакансиях сейчас можно увидеть обязательное требование — умение верстка про БЕМ (BEM). БЭМ на сегодняшний день это современная дефакто модульной разработки проектов признанное во всем мире (если ваш проект подразумевает масштабируемость). Давайте разберем, что же такое БЭМ, из каких полезных фич и компонентов он состоит и как максимально быстро можно начать им пользоваться.
БЭМ
Процитирую Википедию: «БЭМ (Блок-Элемент-Модификатор) — методология web-разработки, а также набор интерфейсных библиотек, фреймворков и вспомогательных инструментов.»
Как показывает практика, сейчас широко используется так называемый “нейминг” БЭМ. Определенное наименование классов по принципу: блок, элемент, модификатор.
Пример написания классов:
block
block__element
block__element_modifier
block_modifier
Сама методология отлично совместима с использованием ее с предпроцессорами (LESS, SASS и т.д.)
.block {
position: absolute;
top: 50%;
left: 50%;
&__element{
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
&_modifier{
margin-top: -250px;
margin-left: -250px;
}
}
}
Вся философия БЭМ построена на создание блоков, которые максимально независимы друг от друга и могут быстро быть перенесены в другой проект. Для этого даже у яндекса есть специальный каталог готовых компонентов которые можно использовать
Про префиксы
Изначальная идея в использование префиксов заключалась в логическом разделение на категории блоков.
b (обычный, ничем не примечательный блок), g (блок без элементов), js (блок — часть js#плагина).
Сейчас на практике обычно используют только префик js- для работы с java script. Остальные можно встретить не так часто(обычно это “легаси” проекты).
BEMJSON
Для вёрстки страниц по методологии БЭМ используется BEMJSON. Так называемы JSобектный формат для проектирования блоков. С помощью json’a мы описываем блоки нашей странице, после чего все это парсится в html по средствам шаблонизатов (BEMHTML, BEMTREE). BEMJSON полностью повторяет саму концепцию БЭМ. На мой взгляд, его стоит использовать, если нужно быстро создавать сайты с похожими структурами. Для маленьких проектов BEMJSON будет только замедлять скорость разработки, ведь для написания нативного HTML времени вы потратите в раз 5 меньше.
О bem-xjst
Это шаблонизатор который ведёт веб-разработку в рамках БЭМ-методологии. Он имеет два движка:
— BEMHTML ( преобразует BEMJSON в HTML);
— BEMTREE ( преобразует BEMJSON с данными в BEMJSON с БЭМ-деревом);
Про Java Script
В БЭМ(если вы используете BEMJSON ) мы не работает с DOM, а работаем с абстрактной структурой блоков-элементов и модификаторов.
block.elem(‘panel’); // возвращает элементы <div class=»tabbed-pane__panel»>
i-bem.js
Специальный фреймворк BEM который автоматизирует работу с JS в рамках методологии BEM. В данной стать я не буду рассматривать этот фреймворк а лишь дал по нему самую общую информацию. Тут можно почитать документацию.
ЗАКЛЮЧЕНИЕ
В этой статье я попытался максимально объяснить что такое БЭМ и какие направления в нем есть. На данный момент БЭМ это хорошая альтернатива веб компонентам в качестве продакшен решение. Это было мое лично мнение. Если вам есть что дополнить или высказать свое мнение вы можете оставить комментарий ниже. С вами были Corvax. Успехов вам!
Подписывайтесь на наш канал в Telegram и на YouTube для получения самой последней и актуальной информации.
Комментарии: