Cobertura de CSS e estilos não utilizados

Arquivos CSS grandes geralmente contêm estilos para componentes que não estão presentes na página atual. Cada byte não utilizado aumenta o tempo de análise sintática, o tempo de construção do CSSOM e o tamanho da transferência. Uma aplicação de produção típica pode ter 90% ou mais de CSS não utilizado em qualquer página.

Abra DevTools → o painel Coverage (Cmd+Shift+P → Coverage). Inicie a gravação, interaja com a página e depois pare. O painel mostra cada arquivo CSS com a porcentagem utilizada e destaca as regras não utilizadas em vermelho. Exporte os dados de cobertura como JSON para análise.

PurgeCSS analisa seus arquivos HTML, JS e de modelo em busca de nomes de classes e remove as regras CSS não utilizadas. Configure os padrões glob de conteúdo para abranger todos os arquivos que possam referenciar nomes de classes. Inclua em uma lista de permissão as classes usadas dinamicamente (adicionadas por JS) para evitar sua remoção acidental.

O compilador JIT do Tailwind gera apenas as classes utilitárias realmente usadas em seus modelos. O CSS resultante é minúsculo — geralmente de 5 a 15 KB para uma aplicação completa — porque as utilidades não utilizadas nunca são geradas. Esse é o resultado ideal da remoção de código não utilizado.

Em uma configuração do webpack ou do Vite, adicione o PurgeCSS com padrões glob de conteúdo que cubram todos os arquivos de modelo. A opção de lista de permissão aceita cadeias de caracteres, expressões regulares e uma lista de permissão profunda para padrões complexos de classes dinâmicas provenientes de bibliotecas como Headless UI.

CSS Modules geram nomes de classes exclusivos por arquivo e eliminam módulos não utilizados por meio da remoção de código morto configurada no empacotador. Somente os módulos CSS importados são incluídos no pacote — manter cada componente junto de seus estilos elimina naturalmente os estilos globais não utilizados.

Divida o CSS por rota em estruturas como Next.js (extração de CSS por página) ou use importações dinâmicas com CSS Modules. Cada página carrega apenas seus próprios estilos, tornando significativa a análise de cobertura por página, em vez de por aplicação.

A auditoria "Reduzir CSS não utilizado" do Lighthouse estima a possível economia de bytes obtida com a remoção de regras não utilizadas. Ela identifica recursos específicos de folhas de estilo com altas porcentagens de conteúdo não utilizado. Use-a como guia de priorização para decidir quais arquivos analisar primeiro.

A análise de cobertura captura apenas os estados visíveis durante a gravação. Estados de foco ao passar o mouse, estados de modal aberto, estados de erro e estados autenticados precisam ser acionados manualmente durante a gravação da cobertura para evitar a remoção incorreta de seus estilos.

Folhas de estilo globais monolíticas acumulam CSS não utilizado ao longo do tempo à medida que funcionalidades são removidas. O CSS por componente (CSS Modules, Styled Components, utilitários do Tailwind) é mais fácil de limpar porque os estilos ficam junto de seus componentes e são removidos com eles.

Para arquivos CSS legados grandes: use UnCSS ou PurgeCSS primeiro no modo somente relatório. Ordene as regras por frequência de uso. Extraia e exclua os estilos claramente não utilizados de plug-ins de terceiros. Trabalhe de forma incremental para evitar remover acidentalmente estilos de estados incomuns.

O que o painel Coverage do Chrome DevTools mede?

A análise de cobertura de CSS com o Coverage e o Lighthouse do DevTools identifica regras não utilizadas. PurgeCSS e o JIT do Tailwind automatizam a eliminação de código morto. CSS Modules e a divisão por rota impedem o acúmulo de estilos não utilizados. Juntos, eles minimizam o volume de CSS e o tempo de análise sintática.