Montando seletores CSS eficiêntes

Introdução

Recentemente, li o artigo How to write efficient css selectors (Como escrever seletores CSS eficiêntes) e aprendi que os seletores descendentes do CSS na verdade são avaliados da direita para a esquerda e não da esquerda para direita, como eu imaginava. Este é um pequeno detalhe, mas que faz toda a diferença na hora de montar seletores CSS de forma eficiênte para que o navegador renderize uma página com alta performance.

Neste artigo, vamos entender melhor como funciona esse processo de aplicação dos estilos pelas folhas de estilo e debater sobre a criação de seletores CSS eficiêntes.

Seletores Descendentes do CSS

Para refrescar a memória, os Seletores Descendentes do CSS são aqueles que especificam os estilos a serem aplicados a um elemento que é um filho não imediato de outro elemento. Por exemplo:

#nav a {
  color: #006600;
}

No exemplo acima, o seletor descendente "#nav a" diz para aplicar um estilo a todos os links (tag "a") descendentes do elemento que possui o id "nav".

O processo de renderização de páginas

A W3C, através da especificação do CSS 2.1, apresenta um procedimento para determinar o valor de uma propriedade de estilo de um elemento. Estes passos sugerem que os navegadores percorram os elementos do documento e, para cada elemento percorrido, analisem as folhas de estilos para determinar quais os valores de cada propriedade vão ter aquele elemento.

Supondo que os navegadores realmente percorrem os elementos para depois determinar os seus estilos, fica evidente o custo de um seletor composto por muitos seletores descendentes. Por exemplo:

/* Exemplo de seletor com alto custo */
#container #nav ul li a {
  ...
}

Considerando o exemplo acima, quando o navegador renderizar a página, ele primeiro vai percorrer os elementos e, quando encontrar um link (tag "a"), ele vai checar se o seletor do exemplo casa com o elemento encontrado. Ou seja, para todos os links do site, ele vai checar se aquele link é descendente de um elemento "li", que por sua vez precisa ser descendente de um elemnto "ul", que é descendente de um elemento com id "nav", que é descendente de um elemento com id "container". Portanto, há um custo enorme, já que, para saber se o seletor casa ou não, é preciso analizar todos os ancestrais daquele link, até chegar na raíz do documento html.

A contradição da performance vs estruturação do documento

Sabendo que um seletor CSS composto por muitos seletores descendentes possui alto custo e, portanto, baixa performance, fica óbvio que para se obter uma boa performance é necessário evitá-los. Porém, evitá-los implica em uma reestruturação da forma com que os seletores e o documento são criados.

Analizando aquele exemplo de seletor com alto custo, poderiamos reescrevê-lo para algo do tipo:

/* Exemplo de seletor de baixo custo */
.nav-link {
  ...
}

Note que este é apenas um seletor de classe, sem descendente. Porém, para utilizá-lo, seria necessário aplicar a classe "nav-link" em todos os links que desejarmos. Isso, a meu ver, é contraditório, pois estariamos "poluindo" nosso documento com muitas classes para uso muito específico, tornando o documento HTML maior e prejudicando a manutenção do mesmo. Outro pequeno inconveniente é que, para seguir esta abordagem, precisariamos colocar classes em praticamente todos os elementos da página para que o layout fosse feito em função do documento e não o documento em função dos estilos que ele precisa.

Um equilibrio, para este caso, seria montar um seletor assim:

/* Exemplo de seletor com custo moderado */
.container-nav-list a {
  ...
}

Neste caso, seria necessário aplicar a classe "container-nav-list" apenas no elemento "ul" desejado, e automaticamente os links descendentes daquela lista teriam um estilo próprio. O nome da classe pode ser montado com a combinação dos elementos que usamos no exemplo inicial, mas também pode ser algo mais genérico, para poder ser reaproveitada em outras listas.

Observe que, reestruturando o HTML, podemos extinguir completamente os seletores descendentes, mas isso, a meu ver, nem sempre é o ideal. E você, qual a sua opinião?

Observação: embora os seletores CSS sejam avaliados da direita para esquerda, os seletores do jQuery, por exemplo, não seguem a mesma lógica. Eles caminham da esquerda para direita e os seletores descendentes, neste caso, auxiliam o jQuery para percorrer apenas o trecho que interessa da árvore do documento.