БЭМ для верстальщиков. С чего начать?

3 305

Всем привет. С вами 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. Успехов вам!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *