29 de março de 2011 Artigos

Performance do seu CSS

Entenda o que pode melhorar ou piorar a performance de carregamento do seu CSS.

Por Diego Eis

Modular seu código CSS é uma boa prática para que o website carregue apenas o código necessário para montar a pagina que o visitante está. Por isso não precisamos carregar o código CSS que monta a página de contato uma vez que o usuário está na home, possibilitando um ganho de performance.
Podemos ainda melhorar um pouco mais nossa performance tendo atenção com a forma que escrevemos os seletores do CSS. Há algumas dicas que podemos seguir para que isso seja possível.

O seletor é a alma do CSS. É com ele que o browser procura e captura o elemento que você deseja formatar. Existem diversos seletores que possibilitam a captura de elementos em diversos cenários e necessidades. Com a atualizações dos browsers em relação a padronização do CSS 2.1 e do CSS 3, os desenvolvedores ganharam novos ferramentas e formas de capturar elementos.

Quero que você entenda que essas dicas são sugestões. Não seja um purista cabeça dura. Seja flexível e tolerante com alguns cenários que podem surgir durante o projeto. É bom sempre procurar o meio termo entre performance e velocidade de produção.

Outro ponto para pensar é que a má performance do CSS pode significar muito pouco perto de outros fatores como servidor, performance server-side, peso de imagens e outros fatores. Por isso é importante que você tenha em mente que fazendo as sugestões abaixo não é garantia de que seu site ficará super ultra rápido. =^)

Processo de leitura

O browser segue um processo de leitura muito fácil de ser entendido.
Todo o seletorer (se voce não sabe o que é um seletor de CSS, recomendo que leia isto e isto antes de continuar).

O sistema de leitura consiste em encontrar o elemento da extrema direita do seletor. Logo a leitura do seletor começa da direita para a esquerda. A medida que o browser lê o seletor, ele vai encontrando os elementos e só pára quando há um erro no seletor ou não encontra o elemento.

Tenha como exemplo este seletor:
[cc lang="CSS"]
ul li a {…}
[/cc]

Nesse primeiro momento, ao ler o elemento da direita, o browser seleciona TODOS os elementos A da página, independente se ele está ou não dentro de um LI.

“The style system matches a rule by starting with the rightmost selector and moving to the left through the rule’s selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch.” – David Hyatt

Não use IDs ou Classes ligados a tags

EVITE:
[cc lang="CSS"]
div.content {…}
div#geral {…}
[/cc]

RECOMENDADO:
[cc lang="CSS"]
.content {…}
#geral {…}
[/cc]

Tente especificar os elementos

Sempre que puder tente especificar os elementos com IDs ou Classes em vez de escrever seletores longos.

EVITE:
[cc lang="CSS"]
nav#menu ul li a {…}
[/cc]

RECOMENDADO:
[cc lang="CSS"]
.menuitem {…}
[/cc]

Eu não gosto muito desta sugestão porque teríamos de colocar uma classe “menuitem” em cada um dos ítens do menu. O HTML ficaria horrível. Prefiro fazer como abaixo. Não é a melhor forma (como eu cito no próximo tópico), mas é um meio termo entre performance, flexibilidade e produção de código:

[cc lang="CSS"]
#menu a {…}
[/cc]

Não misture IDs com nomes de tags e classes

EVITE:
[cc lang="CSS"]
button#botaoverde {…}
.menu#menuPrincipal {…}
[/cc]

RECOMENDADO
[cc lang="CSS"]
#botaoverde {…}
#menuPrincipal {…}
[/cc]

Não coloque nomes de tags nos nomes de classes

Muita gente relaciona o nome da tag ao nome da class ou id do CSS. Essa prática pode confundir posteriormente tanto na manutenção quanto no processo de produção por pelo menos dois motivos: 1. Você pode atribuir essa classe a elementos diferentes e não somente aquele que você relacionou no nome. 2. A classe pode fazer muito mais do que estava descrito inicialmente.
Por isso é interessante que cada nome de Classe seja ÚNICA e não seja relacionada a nenhum elemento em específico.

EVITE:
[cc lang="CSS"]
li.selected {…}
[/cc]

Bom, mas não muito:
[cc lang="CSS"]
.liselected {…}
[/cc]

RECOMENDADO:
[cc lang="CSS"]
.selected {…}
[/cc]

Evite seletores filhos

Sempre tente evitar declarar hierarquia nos seletores. Sempre que puder, coloque o nome do elemento diretamente por meio de class ou id. Mesmo assim tenha em mente a limpeza do seu HTML. Se você já aplicou boa parte dessas sugestões no resto do site, você pode abrir mão em alguns lugares que poderão ser úteis como na criação de um menu.

EVITE:
[cc lang="CSS"]
section form#cadastro fieldset label input.Text {…}
[/cc]

RECOMENDADO:
[cc lang="CSS"]
input[type="text"] {…}
[/cc]

Evite seletores descendentes

Os seletores descendentes são os seletores tem menos performance no CSS.

EVITE:
[cc lang="CSS"]
section article h1 {…}
[/cc]

É bom, mas nem tanto:
[cc lang="CSS"]
section > article > h1 {…}
[/cc]

RECOMENDADO:
[cc lang="CSS"]
.tituloh1 {…}
[/cc]

Claro que é muito complexo colocar uma classe nos títulos do site, ainda mais se os títulos são gerados por outras pessoas. Por isso prefiro, dependendo do site, dependendo do cliente, dependendo de como eu acordar de manhã, utilizar a primeira sugestão, que está marcada para EVITAR. Lembre-se ache o meio termo.

Referências:

• Testing CSS Performance
• Simplifying CSS Selectors
• More on CSS Selector Performance
• Wrinting Efficient CSS