Que armadilhas podem surgir ao otimizar o desempenho do CSS?

Seletores não otimizados. O navegador analisa o CSS de direita para esquerda, por isso seletores complexos e excessivos, especialmente com o seletor universal * ou o seletor de descendentes >, atrasam o cálculo dos estilos.

Grande quantidade de regras @import no CSS. Elas bloqueiam o carregamento paralelo dos estilos, o que retarda a renderização da página.

Uso de propriedades CSS complexas ou que consomem muitos recursos, como sombras (box-shadow, text-shadow) ou desfoque (filter: blur), durante animações ou com muitos elementos.

CSS ilegível ou excessivo, escrito sem considerar a especificidade e herança, levando à sobrescrição de regras e ao aumento do tamanho do arquivo.

CSS não utilizado ("dead CSS") — regras que não se aplicam à estrutura atual. Aumenta o tamanho do arquivo e o tempo de análise.

Imagens de fundo de grande tamanho ou em formatos inadequados, que carregam lentamente e bloqueiam a renderização.

Uso de frameworks que adicionam muitos estilos não utilizados.

Um layout mal projetado com muitos elementos ou profundidade de aninhamento excessiva, o que aumenta o tempo de repintura (repaint) e reflow (reflow).

Uso incorreto de will-change — pode levar ao consumo excessivo de memória GPU ou à criação desnecessária de camadas.

Falta de compressão (Gzip ou Brotli) ao transmitir arquivos CSS do servidor.