Все браузеры начинают разбор 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 используются простые селекторы;
• максимальная скорость при отрисовке страницы в браузере.