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

414

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.

jswanson
fonte
Quando você diz "em um projeto" - o que exatamente você quer dizer? Dependendo do ambiente em que você está usando, a resposta pode ser diferente.
Ian Robinson
Eu fiz uma ferramenta que faz um bom trabalho. Aqui está a minha Code Pen
toddmo 30/09/15
Eu escrevi um script que pode fazer isso por você: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Respostas:

145

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

David Medinets
fonte
14
Não extensão não funciona no Firefox 4
mvark
5
Essa atualização nunca veio à tona e, depois de perguntar nos fóruns do SitePoint, parece que o plugin está morto.
Mike B
3
Parece que o autor postou uma versão atualizada em seu próprio site muito recentemente, mesmo uma versão para o Opera. Confira brothercake.com
Funka
2
Infelizmente não funciona mais
Jonathan
4
Eu escrevi um substituto, rasteja várias páginas em seu site (links abaixo recursivamente): jitbit.com/unusedcss
Alex
259

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

insira a descrição da imagem aqui

Derek Adair
fonte
64
que é incrível, mas muito ruim você não pode executá-lo em um grupo de páginas (de outra forma as regras CSS não utilizados pode ser inevitável)
Damon
17
Eu executo a ferramenta de auditoria e ela me mostra o css não utilizado, mas como usá-lo? Preciso pesquisar manualmente cada item e removê-lo?
Timothée HENRY 27/02
19
É apenas a página atual. Ele diz '2445 regras (83%) de CSS não usadas pela página atual', então não é realmente útil.
chhantyal
8
Ao expandir o item, você obtém uma lista de regras reais que não estão em uso. Embora não seja útil em sites em que você altera o DOM on-the-fly.
Howie
10
Na verdade, isso foi transferido para a cobertura - vá para auditorias -> ao lado de Console, na parte inferior, há um menu (menu do tipo 3 pontos verticais) e você pode selecionar a cobertura. Basta clicar em gravar e navegar.
Graham Ritchie
65

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.

megaSteve4
fonte
5
apenas uma observação de que unused-css.com não permite que você baixe o CSS sem que você seja um membro pago e o plano mais baixo começa em US $ 29 por mês! Parece um pouco caro para o serviço para mim
georgiecasey
1
Eu adicionaria purifycss github.com/purifycss/purifycss à mistura. É gratuito, bastante popular (de acordo com as estrelas no github) e funciona com aplicativos de página única.
Dmitry Gonchar
21

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.

Salman A
fonte
8

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.

mjc
fonte
7

Uso de CSS

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.

Somnath Muluk
fonte
6

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

Josh
fonte
O autor tem uma nova versão postada há apenas algumas semanas em seu site, em www.brothercake.com
Funka
esse plug-in não está mais disponível e o link para download está no brothercake está morto #
Andrea Mauro