Eu estou tentando aprender a escrever CSS mais eficiente, particularmente porque estou trabalhando com um site bastante complexo que precisa renderizar rapidamente.

Estou acostumado a ter muito disso no meu HTML / CSS (principalmente porque gosto da legibilidade):

.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>

Agora entendo que os navegadores executam o processo de correspondência de regras de CSS da direita para a esquerda, o que significa que<a> O elemento na última regra de CSS acima corresponderia primeiro a todos os links da página, levando à perda de desempenho.

Então, pelo que eu entendi, a solução amigável ao navegador seria ser mais específica e usar, por exemplo:

.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>

(supondo que eu esteja usando herança sempre que possível, mas muitas vezes ainda precisam de controle específico sobre o último elemento na árvore)

O que me causa dúvida é: todo o excesso de HTML da impressão de nomes de classes em elementos em toda a página não nega os ganhos de desempenho obtidos ao evitar seletores filhos CSS aninhados? Estou acostumado a tentar escrever menos HTML e isso vai contra isso. Qualquer insight seria apreciado.