O primeiro passo para se discutir a performance da renderização das páginas no navegador é entender como o navegador funciona.
Antes de continuar você deve entender os conceitos de browser reflow e browser repaint, pois nosso objetivo para ter uma página renderizada mais rapidamente é a redução dos reflows e repaints da página.
Como o navegador interpreta o CSS?
O navegador começa a leitura do CSS da direita para a esquerda, do nosso último elemento para o primeiro. Ele pega o seletor bem da direita, percorre todos os elementos do DOM que casem com este seletor e passar para o próximo seletor a esquerda, verificando os parents do seletor que ele verificou anteriormente (o bem da direita na sua linha de seletores).
Parece confuso mas na prática é simples. Para o código abaixo, por exemplo:
#content #menu ul li a
O navegador vai varrer todos os elementos "a" da sua página, depois ele vai verificar quais destes elementos estão dentro de um elemento li e assim por diante até encontrar o elemento #content.
Agora que você já sabe como o navegador trabalha vamos as dicas de CSS para páginas rápidas!
1. Escreva seletores curtos
Agora que você já sabe como o navegador percorre o seu seletor, já sabe quanto mais curto ele for menos será o caminho percorrido e consequentemente mais rápida a renderização da sua página.
Evite
#content nav#menu ul li a
Melhor performance CSS
.menu-item
Outro exemplo, em uma página com bastante conteúdo tabular:
Evite
table thead tr td
Melhor performance CSS
.header-table
2. Prefira classes e ids do que seletor por elemento
Quanto mais preciso seu seletor for menos elementos do DOM serão percorridos pelo browser, o seletor de tag tende a ser mais abrangente do que seletor de classe.
Evite
h2.product-title
Melhor performance CSS
.product-title
Evite
nav#menu
Melhor performance
#menu
O navegador não precisa fazer 2 verificações para estilizar os elementos casados com a classe.
3. Evite seletor universal, por atributo e pseudo-selectors
Principalmente no IE evite os pseudo seletores como :hover, :nth-child e outros. O seletor universal percorre todos os elementos do DOM (por isso a baixa performance) e os pseudo seletores tem uma performance bem inferior do que qualquer seletor por classe ou id, então sempre que for possível evite seu uso.
Evite:
input[type="text"]
Não tão ruim:
input.texto
Melhor performance CSS:
.input-texto
Dica bônus: não enlouqueça
Não seja um paranóico, não deixe que as preocupações com performance de CSS prejudiquem (muito) a organização e leitura do seu código.
Se você trabalha em projetos com uma equipe grande em que todos estão acostumados a escrever seletores descritivos (e compridos) para facilitar o entendimento do código pode ser um pouco complicado fazer esta mudança, uma boa dica é estimular comentários no CSS – qualquer processo de minify arrancará os comentários e manterá o código enxuto.
Para saber mais sobre performance no front-end veja este post sobre performance de javascript e o recente post do Chris sobre manipulação do DOM de forma mais performática.
Se está na dúvida (ou não acredita no que escrevi), utiliza esta ferramenta para testar a performance de seletores CSS.
Referências:
Melhorando a performance do CSS
Google best pratices rendering