Existe uma maneira de verificar quais estilos CSS estão sendo usados ​​ou não usados ​​em uma página da Web?

Deseja saber quais estilos CSS estão sendo usados ​​atualmente em uma página da web.

Instale o complemento de uso do CSS para o Firebug e execute-o nessa página. Ele dirá quais estilos estão sendo usados ​​e não são usados ​​por essa página.

O Google Chrome tem duas maneiras de verificar se há CSS não usado .

1. Guia Auditoria: > Clique com o botão direito + Inspecionar elemento na página, localize a guia “Auditoria” e execute a auditoria, certificando-se de que “Desempenho da página da Web” esteja marcado.

Lista todas as tags CSS não usadas – veja a imagem abaixo.

Captura de tela da ferramenta de auditoria do Chrome

Atualização: – – – – – – – – – – – – – – OU – – – – – – – – – – – – – –

2. Aba de Cobertura: > Clique com o Botão Direito + Inspecionar Elemento na página, localize os três pontos à direita (circulados na imagem) e abra a Gaveta do Console (ou pressione Esc), finalmente clique nos três pontos à esquerda na gaveta (circulada) na imagem) para abrir a ferramenta Cobertura.

O Chrome lançou uma ferramenta para ver as CSS não utilizadas e a atualização do JS- Chrome 59 Permite iniciar e parar uma gravação (quadrado vermelho na imagem) para permitir uma melhor cobertura da experiência do usuário na página.

Mostra todos os CSS / JS usados ​​e não utilizados nos arquivos – veja a imagem abaixo.

Exemplo de ferramenta de cobertura no Chrome

Apenas por ser completo e porque foi perguntado nos comentários – também existe a ferramenta de auditoria CSS no Chrome para o mesmo propósito. Alguns detalhes aqui:

http://meeech.amihod.com/very-useful-find-unused-css-rules-with-google

Dê uma olhada no UnCSS . Isso ajuda na criação de um arquivo CSS de CSS usado.