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

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

text
Олег Завражин
Frontend developer
Сейчас подрастает поколение frontend-разработчиков (называем модненько), которые сразу учатся организовывать CSS, используя БЭМ-методологию, про каскад они что-то слышали, общее представление имеют, но на линии «фронта» с ним не сталкивались. Но будет же здорово понимать, как и чем одно отличается от другого, сильные и слабые стороны каждого подхода, не так ли? Согласные — гоу под кат.  

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

Термины

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

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

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

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

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

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

.menu ul.top-menu li a  {
    font-size: 16px;
    text-decoration: none;
    color: #fffff;
    background: #517aff;
}

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

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

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

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

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

.top-menu-item__link {
    font-size: 16px;
    text-decoration: none;
    color: #fffff;
    background: #517aff;
}

«Выравниваем» специфичность между элементами 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, довольно неплохо.

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

О чем вам интересно почитать?
Напишите нам, чтобы предложить тему для следующей статьи.
Отправить