Ferramenta de limpeza de regras CSS

Question

Temos vários arquivos CSS maciços que continuam crescendo ao longo dos anos sempre que novos elementos eram adicionados ao nosso sistema, bem como às páginas JSP (que incluem outras páginas JSP e assim por diante) que fazem referência a esses arquivos.

Sabemos que temos muitas regras que não são mais usadas e muitas que são redundantes.

Novas ferramentas continuam saindo. Existe uma ferramenta que (além de óbvias, como o Aptana e o Validador CSS do W3C) que podem analisar um diretório e ajudar na limpeza e otimização das regras do CSS?

Answer 1

É uma tarefa complicada ... especialmente se o seu conteúdo HTML DOM for gerado em tempo real.

O plug-in Dust-me-Selectores é útil, mas, página a página, muitos seletores não serão utilizados ... mas não o NECS será inválido.

Existem alguns truques que usei para ajudar a limpar.

Um por um, insira algum estilo horrível que você poderá identificar imediatamente para determinar se um seletor está sendo usado. por exemplo

border:6px dashed #ffaacc;
padding:12px;

Qualquer coisa que se torne com uma enorme borda rosa quente tracejada agora ... é um seletor "ativo". Se você pode navegar na maior parte do seu site/aplicativo sem vê -lo, provavelmente será "morto".

(Se o seu código CSS for "gerado", você poderá otimizá -lo para testar com várias cores de uma só vez e usar conteúdo gerado para prender o "id" do seletor)

Outra opção se você usar um sistema CSS gerado ... é adicionar uma propriedade final ao seu seletor que os conjuntos dizem ... uma imagem de fundo com um URL gerado. por exemplo

#selector_a > .foo{
  ...
  background-image:url('selectortest/id_123.png');
}
#selector_b .bar{
  ...
  background-image:url('selectortest/id_124.png');
}

Em seguida, você simplesmente navega no seu site/aplicativo por um tempo, verifica o log da web para solicitações de imagem HTTP ... para qualquer URL de imagem gerada que não foi solicitada no log ... você provavelmente encontrou um seletor "morto".

Answer 2

Há Selectores de poeira O plug -in do Firefox, embora procure uma página renderizada no navegador, é claro, não através de um diretório.

Answer 3

Selênio Permite automatizar o teste de página e selecionar elementos via seletores CSS. Se você acumular as correspondências no site, poderá identificar itens incomparáveis.