Eu tenho um arquivo CSS enorme e um arquivo HTML. Gostaria de descobrir quais regras não são usadas ao exibir um arquivo HTML. Existem ferramentas para isso?
O arquivo CSS evoluiu ao longo de alguns anos e, pelo que sei, ninguém jamais removeu nada dele - as pessoas simplesmente escreviam novas regras de substituição repetidas vezes.
EDIT: Foi sugerido o uso de Dust-Me Selectors ou a ferramenta de desempenho de página da Web do Chrome. Mas ambos trabalham no nível de seletores e não em regras individuais. Eu tenho muitos casos em que uma regra dentro de um seletor é sempre substituída - e é disso que eu quero me livrar. Por exemplo:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }Todo o texto no meu HTML está dentro de algum elemento do invólucro, portanto nunca é branco. bodyO preenchimento sempre funciona, então é claro que todo o bodyseletor não pode ser removido. E eu gostaria de me livrar dessas regras inúteis também.
EDIT: E outro caso de regra inútil: quando duplica um existente sem alterar nada:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }Eu ficaria feliz em me livrar do segundo margin-left... novamente, parece-me que essas ferramentas não encontram essas coisas.
EDIT: Agradeço todas as respostas, mas, infelizmente, as ferramentas que você sugeriu não fizeram nenhuma sugestão útil. Votou suas respostas, mas vou esperar por uma ferramenta que faça as coisas de forma mais granular, conforme especificado acima.
Obrigado,
fonte
Respostas:
Extensão Dust Me Selecters Firefox
Nas Ferramentas de desenvolvedor do Chrome, você pode usar a ferramenta Desempenho da página da Web para encontrar regras de CSS não utilizadas.
fonte
.abctiver uma margem diferente,<a class="abc">eu mudaria sua margem ao passar o mouse, eu acho. Agora, provavelmente não é isso que você pretende, mas certamente poderia ser, e você não pode remover cegamente essa regra duplicada.a.abcou <a class="abc"/> em nenhum lugar do HTML, ele não existe. De qualquer forma, eu já terminei a tarefa que me levou a fazer essa pergunta aqui e terminei com a aplicação de muitas heurísticas. Eu tentei as Ferramentas de desenvolvedor do Chrome, mas elas não me ajudaram muito.Você também pode dar uma olhada no Unused-CSS.com. Essa ferramenta irá explorar suas páginas e criar arquivos CSS otimizados sem os seletores não utilizados
fonte
Eu sempre gostei de uso de CSS . É um plug-in para o Firebug e vamos analisar a página e ver quais regras CSS não são aplicadas. Ele digitaliza automaticamente e funciona em várias páginas.
fonte
Verifique uncss, é um módulo de nó.
"O UnCSS é uma ferramenta que remove CSS não utilizado de suas folhas de estilo. Ele funciona em vários arquivos e suporta CSS injetado em Javascript."
https://www.npmjs.com/package/uncss
Editar após o comentário:
Eu acho que você está pedindo duas coisas diferentes:
Remova as regras não utilizadas automaticamente, é isso que o uncss pode fazer por você. Eu também fiz essa ferramenta, CSS byebye, mas não é automática como você pergunta: https://www.npmjs.com/package/css-byebye
Otimize a folha de estilo onde as regras podem ser mescladas / simplificadas.
Nesse caso, eu recomendaria duas ferramentas que fazem esse tipo de coisa:
Eles fazem mais ou menos as mesmas otimizações, às vezes um tem melhores resultados que o outro, e às vezes é o contrário. Depende da sua folha de estilo. (você pode executar um após o outro também: P)
Eu os uso como parte de um processo de construção com o grunhido. Portanto, não é realmente uma coisa visual como você pergunta, mas eles fazem o tipo de otimização que você deseja.
Aqui está o que eles dizem para o CSSO (informações completas aqui: https://en.bem.info/tools/optimizers/csso/ )
Otimizações estruturais:
fonte
@ John: excelente ferramenta, obrigado pelo link
@ liori: Eu também recomendo o plugin Firefox Web Developer, que permite exibir os nomes / propriedades dos elementos, editar o css em tempo real (não grava no seu arquivo css), para que você possa editar e testar as alterações do css sem a necessidade de ter que salvar e enviar seu css a cada 3 segundos. + carrega mais recursos.
Há também um inspetor DOM muito bom que se conecta ao Firebug, que também se conecta e é ótimo para classificar o Javascript.
fonte
Na verdade, John, o novo navegador Firefox Developer Edition é melhor do que usar o Firebug ou o utilitário Firefox. Experimente e você não ficará desapontado, tenho certeza!
https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015
fonte