Quais armadilhas podem surgir ao otimizar o desempenho do CSS?

• Uso excessivo de seletores complexos: Seletores como > * ou :nth-child podem ser lentos para o navegador ao procurar elementos.
• Uso de @import: @import gera requisições HTTP adicionais e bloqueia o carregamento paralelo de estilos, o que desacelera a renderização da página.
• Não usar propriedades abreviadas: Definir várias propriedades (por exemplo, margin-top, margin-bottom, etc.) em vez de margin pode aumentar o tamanho do arquivo e o tempo de análise.
• Grande quantidade de regras !important: O uso de !important quebra a cascata e dificulta a depuração e manutenção dos estilos.
• Uso de CSS redundante: Ter estilos que não se aplicam a nenhum elemento na página aumenta o tamanho do arquivo.
• Imagens não otimizadas: Imagens usadas em CSS (por exemplo, em fundos) devem estar comprimidas e ter os formatos corretos.
• Falta de minificação e compressão: Arquivos CSS devem ser minificados e comprimidos (por exemplo, Gzip) para reduzir seu tamanho e acelerar o carregamento.
• Grande quantidade de arquivos CSS: Muitos arquivos CSS pequenos aumentam as requisições HTTP.
• Bloqueio do renderizado: CSS por padrão bloqueia o renderizado. Uma organização incorreta do carregamento de CSS (por exemplo, estilos não críticos no início do arquivo) pode atrasar a renderização.
• Uso de fontes não padrão sem otimização: Carregar muitas fontes ou fontes sem otimização (por exemplo, sem subconjuntos) pode desacelerar o carregamento da página.
• Grandes árvores DOM: Mesmo com CSS otimizado, árvores DOM complexas e profundas podem desacelerar a aplicação de estilos e o repintar.
• Animações com CSS que causam recalculações frequentes: Usar propriedades como left/top em vez de transform pode ser mais custoso para o navegador.
• Uso incorreto de consultas de mídia: Muitas consultas de mídia ou não otimizadas podem aumentar o tempo de processamento de estilos.
• Falta de análise de desempenho: Sem ferramentas de análise (por exemplo, a aba Performance do Chrome DevTools), é difícil identificar gargalos.

/* Exemplo de seletor ineficiente */
body > * {
    margin: 0;
}

/* Exemplo de seletor mais eficiente */
.container {
    margin: 0;
}

/* Evite usar @import */
@import url('other.css');

/* Prefira usar <link> no HTML */

/* Em vez disso */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* Use a propriedade abreviada */
margin: 10px 20px;