Каскадирование и БЭМ

Бывает, что ты пишешь статьи про разработчиков. А бывает, что разработчик сам пишет про себя. Сегодня бенефис Олега, встаем и громко хлопаем в ладошки, передаем ему микрофон.

4 320 просмотров

И, конечно же, полезности в конце статьи.*

Термины

Селектор (selector) — это формальное описание того элемента или группы элементов, к которым применяется указанное правило стиля. (Источник)

Специфичность селекторов (selector’s specificity) определяет их приоритетность в таблице стилей. Чем специфичнее селектор, тем выше его приоритет. (Источник)

БЭМ (BEM) — организация кода по принципу «Блок, Элемент, Модификатор».

Обязан внести ремарку: в нашей студии мы используем не классический яндексовский БЭМ, а модифицированный в соответствии с предложениями Николаса Галлахера. И зачастую продолжаем писать HTML «ручками» с препроцессорами, не дробить JS на функциональные блоки. Решения для каждого из проектов принимаются «опционально-рациональным методом» и всегда отличаются от последующего.

А теперь, когда мы говорим на одном языке, рассмотрим то, как писали (и сейчас пишут) стили.

Селектор в каскадных стилях

Специфичность данного селектора очень велика, и если вы захотите применить тот же стиль где-то еще на своем сайте, то придется делать лишний Ctrl+C/Ctrl+V, а потом еще дизайнеру не понравится, что он сам и нарисовал — придется организовывать поиски с интерполом и кинологами, чтобы поправить бордер (подразумевается, что вы пользуетесь препроцессорами).

Впоследствии поддержка может превратится в бесконечный бесплатный аттракцион с блек-джеком и претензиями «а че так долго?».

Как обрабатывает «машина» код в этом случае: сначала все <a>, потом <a>, вложенные в <li>, далее вся эта «вложенность» в составе <ul class="top-menu"> и, наконец, <div class="menu"><div>

*браузер обрабатывает стили справа налево!

Как этот селектор будет выглядеть при БЭМ

«Выравниваем» специфичность между элементами DOM.

Обработка <a class="top-menu-item__link">. То есть браузер сразу же нашел ссылку по селектору .top-menu-item__link.

Блоком здесь выступает <li class="top-menu-item"> и характеризуется тем, что как элемент страницы он функционально независим.

да, <ul class="top-menu"> тоже блок, вся прелесть в том, что можно вкладывать один блок в другой и даже вкладывать блоки в элементы.*

Элементом (составляющей частью блока) является <a class="top-menu-item__link">.

Модификатор в данном примере пригодится для выделения, например, активного пункта меню .top-menu-item__link—active, его задача — видоизменять элемент или блок.

На сладкое — сравнительная таблица, которая поможет окончательно понять, в чем крутость БЭМ.

Критерий	Каскадирование	БЭМ
поддержка кода	-	+
	Необходимо упразднить первый пункт меню, убрать подчеркивание и отменить вызов какой-либо js функции.
	Как минимум — копаться и править в 3-4 файлах, так как у каждого из пунктов своя иконка, а выводится она почему-то через псевдоэлемент (чтоб им всем руки поотрывало).	При этой же задаче: открыл шаблон компонента меню в том же Битриксе, удалил пункт меню, убрал
ввод новых сотрудников в проект	-	+
	Расскажи и объясни что, где и как, извинись, что использовал id: #main-page и #secondary-page да еще и привязал все это к стилям, а потом минифицировал без сборщика (не с той ноги встал) и теперь это все в одну строку без исходника.	даже если БЭМ не знает, то довольно быстро разберется, привыкнет и примется за работу без посторонней помощи.
скорость внесения изменений в стили	-	+
	Поменять цвет шрифта цитат на одной из текстовых страниц.
	Разбираешь каскад на части, выражаешься нецензурно, с Божьей помощью делаешь.	Вводишь один новый модификатор.
совместная работа над проектом нескольких специалистов	-	+
	Долгие обсуждения и планерки по организации кода внутри команды, у каждого свое видение.	Все же делают по БЭМ, проблем нет.
без вреда для внешнего вида страницы менять структуру html	-	+
	Изменил HTML, теперь чтобы верстка непорушилась вынужден править стили.	Просто убирай что хочешь, меняй, переноси.
красивый, удобочитаемый DOM	+	-
	Нет лишних стилей и модификаторов на странице.	Целая куча классов.
семантика	+	+
	Вполне себе семантично.	дефектов тоже не выявлено, но считается, что не ок.

Итого 5 к 2, довольно неплохо.

Как и обещал: полезности