Existem boas abordagens para ajudar a identificar definições de CSS não utilizadas em um projeto? Um monte de arquivos CSS foram puxados e agora estou tentando limpar um pouco as coisas.
Existem boas abordagens para ajudar a identificar definições de CSS não utilizadas em um projeto? Um monte de arquivos CSS foram puxados e agora estou tentando limpar um pouco as coisas.
Respostas:
Dê uma olhada na extensão Dust-Me do Firefox em https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .
As Ferramentas do desenvolvedor do Chrome têm uma guia Auditorias que pode mostrar seletores de CSS não utilizados.
Execute uma auditoria e, em Desempenho da página da Web, consulte Remover regras CSS não utilizadas
Acabei de encontrar este site - http://unused-css.com/
Parece bom, mas eu precisaria verificar minuciosamente o css 'clean' gerado antes de enviá-lo para qualquer um dos meus sites.
Além disso, como em todas essas ferramentas, eu precisaria verificar se não retiramos IDs e classes sem estilo, mas são usados como seletores JavaScript.
O conteúdo abaixo é retirado de http://unused-css.com/, portanto, agradeça a eles por recomendar outras soluções:
Lath Sehgal escreveu um aplicativo Windows para encontrar e remover classes CSS não utilizadas. Eu não testei, mas a partir da descrição, você deve fornecer o caminho dos seus arquivos html e um arquivo CSS. O programa listará os seletores de CSS não utilizados. Na captura de tela, parece que não há como exportar esta 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, será necessário limpá-los um por um.
Dust-Me Selectors é uma extensão do Firefox (para v1.5 ou posterior) que encontra seletores de CSS não utilizados. Ele extrai todos os seletores de todas as folhas de estilo da página que você está visualizando e analisa a página para ver quais desses seletores não são usados. Os dados são armazenados para que, ao testar as páginas subseqüentes, os seletores possam ser cruzados da lista à medida que forem encontrados. Esta ferramenta deve ser capaz de criar um site inteiro, mas infelizmente eu poderia fazê-lo funcionar. Além disso, não acredito que você possa configurar e baixar o arquivo CSS com os estilos removidos.
O Topstyle é um aplicativo do Windows que inclui várias ferramentas para editar CSS. Não testei muito, mas parece que ele tem a capacidade de remover seletores CSS não utilizados. Este software custa 80 USD.
O Liquidcity CSS cleaner é um script php que usa expressões regulares para verificar os estilos de uma página. Ele informará as classes que não estão disponíveis no código HTML. Eu não testei esta solução.
Deadweight é uma ferramenta de cobertura CSS. Dado um conjunto de folhas de estilo e um conjunto de URLs, ele determina quais seletores são realmente usados e as listas que podem ser excluídas "com segurança". Esta ferramenta é um módulo ruby e funcionará apenas com o site rails. Os seletores não utilizados devem 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. Você primeiro precisa instalar o arquivo javascript na página que deseja testar. Então, você deve chamar uma função de hélio para iniciar a limpeza.
UnusedCSS.com é um aplicativo da web com uma interface fácil de usar. Digite o URL de um site e você obterá uma lista de seletores de 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.
CSSESS é um bookmarklet que ajuda a encontrar seletores CSS não utilizados em qualquer site. Essa ferramenta é bastante fácil de usar, mas não permite configurar e baixar arquivos CSS limpos. Ele listará apenas arquivos CSS não utilizados.
O Google Page Speed pode fazer isso por você (na verdade, faz muito mais do que apenas dizer qual CSS não é usado). No FireFox, ele está disponível como um complemento do FireBug. Depois, há uma versão online também.
Um melhor minimizador de CSS em C # despeja 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 visível no momento, você pode jogar fora os estilos de que precisa.
EDIT: link quebrado, mas archive.org tem a página e o código.
Extensão Firebug para visualizar quais regras CSS são realmente usadas.
O uso de CSS é uma extensão do Firebug (portanto, é necessário ter o Firebug instalado) que permite conhecer regras de estilo CSS não utilizadas. Ele identifica o CSS que você usa e não usa. Ele permite que você indique quais peças desnecessárias podem ser removidas. Você definitivamente deve usar este complemento para manter seus arquivos CSS o mais leve possível.
Parece que alguém atualizou o DustMe Selectors para trabalhar com o Firefox novamente com um novo nome - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198
Use a barra de ferramentas do desenvolvedor do Internet Explorer , s Exibir> Correspondências do seletor CSS : exibe 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 Firefox . Faz isso e muito mais.
Aparentemente, um plug-in do Chrome também está em desenvolvimento.