Я пытаюсь научиться писать более эффективный CSS, особенно потому, что работаю с довольно сложным сайтом, который должен быстро рендериться.

Я привык иметь много этого в моем HTML / CSS (в основном потому, что мне нравится удобочитаемость):

.spotlight {}
.spotlight ul {}
.spotlight ul li {}
.spotlight ul li a {color: #333;}

<div class="spotlight">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

Теперь я понимаю, что браузеры запускают процесс сопоставления правил CSS справа налево, что означает, что<a> Элемент в последнем вышеприведенном правиле CSS сначала будет соответствовать каждой ссылке на странице, что приведет к снижению производительности.

Итак, из того, что я понял, решение для браузера было бы более конкретным и использовало, например:

.spotlight {}
.spotlight-link {color: #333;}

    <div class="spotlight">
      <ul>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
      </ul>
    </div>

(при условии, что я использую наследование, где это возможно, но часто все еще требуется особый контроль над последним элементом в дереве)

Что вызывает у меня сомнение: разве все лишнее раздувание HTML от печати имен классов на элементах по всей странице не сводит на нет прирост производительности, достигнутый благодаря отказу от вложенных дочерних селекторов CSS? Я привык пытаться писать меньше HTML, и это противоречит этому. Любое понимание будет оценено.