Все браузеры начинают разбор CSS селекторов справа налево. Кстати, так же поступают и популярные библиотеки при поиске DOM элементов по заданному селектору.
Пусть в CSS файле, например, указан селектор section.main .article p { … }
. Во время отрисовки проверяется, что текущий элемент p. Если это так, то браузер будет искать в дереве всех предков с классом article
, а затем предков section с классом main
. Только к элементам, для которых были найдены все требуемые предки, и будут применяться декоративные свойства.
Очевидно, что самые быстрые селекторы – это те, которые требуют меньше проверок: div, .main, #sidebar
. Такие селекторы называются простыми. Каскадным селекторам (например, как в предыдущем случае) требуется гораздо больше времени для прохождения таких проверок. Так в БЭМ, по возможности, используются только простые селекторы или последовательности простых селекторов (например, a.menu__item-link:hover
), чтобы обеспечить максимальную скорость отображения страниц.
С обычной вёрсткой проблемы добавить нужные классы не возникает. А вот для контента, создаваемого пользователем, такие классы придётся назначать автоматически. Для своего блога на Вордпрессе я написал небольшой фильтр.
function my_content_filter_callback($parts)
{
$tag = strtolower($parts[1]);
$attrs = $parts[2];
$cls_replacement = ' class="t-' . strtolower($tag);
if (strpos($attrs, ' class=') === false) {
$attrs = $cls_replacement . '"' . $attrs;
} else {
$attrs = str_replace(' class="', $cls_replacement . ' ', $attrs);
}
return '<' . $tag . $attrs . '>';
}
function my_content_filter($content)
{
if (!is_feed()) {
$out = preg_replace_callback('#<([a-zA-Z0-9]+)([^>]*)>#',
'my_content_filter_callback', $content);
} else {
$out = $content;
}
return $out;
}
add_filter('the_content', 'my_content_filter', 20);
Фильтр вызывается при отображении статьи. Каждому тегу в статье добавляется класс с именем тега. Например, <p> становится <p class="t-p">, а <div class="video"> становится <div class="t-div video">.
<h3 class="t-h3">Элемент article</h3>
<p class="t-p">Новый элемент <em class="t-em">article</em> — это специальный вид
<em class="t-em">section</em>, который обозначает независимую и самодостаточную
часть страницы. На его месте можно использовать <em class="t-em">section</em>,
но <em class="t-em">article</em> добавляет больше семантического значения.</p>
Теперь элементы статьи можно декорировать простыми селекторами не опасаясь, что они будут конфликтовать с оформлением других блоков.
.t-h3 { font-size: 1.5em; font-weight: bold; margin: 1em 0 0.5em; }
.t-p { margin: 1em 0; }
.t-em { font-style: italic; }
Подведу итоги:
- небольшое увеличение объема HTML кода почти никак не сказывается на трафике для пользователя, так как по сети данные передаются в сжатом виде;
- нет ручной работы по добавлению классов элементам;
- при декорировании в CSS используются простые селекторы;
- максимальная скорость при отрисовке страницы в браузере.
