Como identificar definições de css não utilizadas

Existem boas abordagens para ajudar a identificar definições de CSS não utilizadas em um projeto? Um monte de arquivos css foram colocados e agora eu estou tentando limpar as coisas um pouco.

Dê uma olhada na extensão do Firefox Dust-Me em https://addons.mozilla.org/pt-BR/firefox/addon/dust-me-selectors/ .

As Ferramentas do desenvolvedor do Google Chrome têm uma guia ” Auditorias” que pode mostrar seletores de CSS não usados.

Execute uma auditoria e, em Desempenho da Página da Web, consulte Remover regras de CSS não usadas

insira a descrição da imagem aqui

Acabei de encontrar este site – http://unused-css.com/

Parece bom, mas eu preciso verificar cuidadosamente o seu css limpo antes de enviá-lo para qualquer um dos meus sites.

Além disso, como com todas essas ferramentas, eu precisaria verificar se ele não removeu id e classs sem estilo, mas são usados ​​como seletores de JavaScript.

O conteúdo abaixo é retirado de http://unused-css.com/, portanto, dê crédito a eles por recomendar outras soluções:

Latino Sehgal escreveu um aplicativo do Windows para localizar e remover classs CSS não utilizadas. Eu não testei, mas a partir da descrição, você tem que fornecer o caminho de seus arquivos html e um arquivo CSS. O programa listará os seletores CSS não utilizados. Na captura de canvas, parece que não há como exportar essa lista ou baixar um novo arquivo CSS limpo. Também parece que o serviço está limitado a um arquivo CSS. Se você tiver vários arquivos que deseja limpar, terá que limpá-los um por um.

Dust-Me Selectors é uma extensão do Firefox (para v1.5 ou posterior) que encontra seletores CSS não utilizados. Ele extrai todos os seletores de todas as folhas de estilo da página que você está visualizando e analisa essa página para ver quais desses seletores não são usados. Os dados são então armazenados para que, ao testar as páginas subsequentes, os seletores possam ser eliminados da lista quando forem encontrados. Esta ferramenta é supostamente capaz de aranha um site inteiro, mas eu infelizmente poderia fazê-lo funcionar. Além disso, não acredito que você possa configurar e baixar o arquivo CSS com os estilos removidos.

Topstyle é um aplicativo do Windows, incluindo um monte de ferramentas para editar CSS. Eu não testei muito, mas parece que tem a capacidade de remover seletores CSS não utilizados. Este software custa 80 USD.

Liquidcity CSS cleaner é um script php que usa expressões regulares para verificar os estilos de uma página. Ele informará as classs que não estão disponíveis no código HTML. Eu não testei esta solução.

Deadweight é uma ferramenta de cobertura de CSS. Dado um conjunto de folhas de estilo e um conjunto de URLs, ele determina quais seletores são realmente usados ​​e listas que podem ser “seguramente” excluídas. Esta ferramenta é um módulo de ruby e só funcionará com o site do Rails. Os seletores não utilizados precisam ser removidos manualmente do arquivo CSS.

O Helium CSS é uma ferramenta javascript para descobrir CSS não utilizado em muitas páginas de um site. Primeiro você precisa instalar o arquivo javascript na página que deseja testar. Então, você tem que chamar uma function de hélio para iniciar a limpeza.

O UnusedCSS.com é um aplicativo da web com uma interface fácil de usar. Digite o URL de um site e você receberá uma lista de seletores CSS. Para cada seletor, um número indica quantas vezes um seletor é usado. Este serviço tem algumas limitações. A instrução @import não é suportada. Você não pode configurar e baixar o novo arquivo CSS limpo.

O CSSESS é um bookmarklet que ajuda você a encontrar seletores CSS não usados ​​em qualquer site. Esta ferramenta é muito fácil de usar, mas não permite configurar e baixar arquivos CSS limpos. Ele listará apenas arquivos CSS não usados.

O Google Page Speed pode fazer isso por você (na verdade, faz muito mais do que apenas dizer a você qual CSS não está sendo usado). No FireFox, está disponível como um complemento do FireBug. Depois, há uma versão online também.

Um melhor CSS Minifier em C # descarta estilos redundantes;

Você também gostaria de usar o Dust-Me com isso.

Lembre-se de que, se houver algum conteúdo que não esteja atualmente visível para o dust-me, você poderá descartar os estilos necessários.

EDIT: link foi quebrado, mas o archive.org tem a página e o código.

Parece que alguém atualizou DustMe Selectors para trabalhar com o Firefox novamente com um novo nome – ‘CSS Roundup’ http://blog.brothersmorrison.com/?p=198

Uso de CSS

Extensão Firebug para ver quais regras CSS são realmente usadas.

Uso de CSS é uma extensão para o Firebug (portanto, necessário ter o Firebug instalado) que permite conhecer regras de estilo CSS não usadas. Ele identifica o CSS que você usa e não usa. Ele permite que você indique quais partes desnecessárias podem ser removidas. Você definitivamente deve usar este complemento para manter seus arquivos CSS o mais leves possível.

Usar Barra de Ferramentas do Desenvolvedor do Internet Explorer Exibir> Correspondências de Seletor de CSS : Exibir um relatório de todas as regras de estilo definidas e quantas vezes elas são usadas na página atual.

Confira o PageSpeed ​​do Google para o Firefox . Ele faz isso e uma carga maior.

Aparentemente, um plug-in do Chrome está em desenvolvimento também.