Como encontrar regras CSS não utilizadas / não aplicadas em uma folha de estilo?

18

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,

liori
fonte
Você pode aproveitar a falta de qualquer ferramenta adequada como uma oportunidade: como você entende o que precisa, pode ser a melhor pessoa para criar essa ferramenta. Você pode inspecionar o código das ferramentas existentes em busca de idéias e técnicas e, em seguida, criar algo que funcione no nível da regra e não no seletor. Sua chance de fama e fortuna! ... bem, talvez apenas fama;)
iconoclast
@Brandon: esta questão apenas bater a marca “notável pergunta” ... assim que você pode estar certo :-)
Liori

Respostas:

8

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.

John Conde
fonte
Ótimo, vou ver agora!
liori 4/03/11
Essas ferramentas podem remover apenas seletores inúteis. Esclarei minha pergunta.
liori 4/03/11
2
@iorior: Eu não acho que isso seja possível com segurança. No seu exemplo de margem, a segunda regra de margem pode parecer supérflua, mas tem uma especificidade mais alta e pode substituir uma regra posterior. Por exemplo, se uma classe .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.
usar o seguinte
@DisgruntledGoat: Estou pensando em um caso de um mundo fechado: se não for especificado, ele não existe. Portanto, se não houver definições 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.
Liori
5

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
4

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.

macca1
fonte
2

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:

  1. 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

  2. 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:

  • Mesclando blocos com seletores idênticos
  • Mesclando blocos com propriedades idênticas
  • Remoção de propriedades substituídas
  • Remoção de propriedades de taquigrafia substituídas
  • Remoção de seletores repetidos
  • Mesclagem parcial de blocos
  • Divisão parcial de blocos
  • Remoção do conjunto de regras e regra vazia
  • Minificação de propriedades de margem e preenchimento
Kev
fonte
A julgar pela página principal, ele funciona no nível do seletor. Ele pode realmente remover regras nos dois casos de exemplo mencionados na pergunta?
liori 17/02/2015
Eu editei minha resposta. Eu testei o seu primeiro exemplo, com interface web CSSO: resultado: body {color: # fff; padding: 10em} h1, p, ul {color: # 000}
Kev
1

@ 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.

Digital Essence
fonte