Refatorando arquivos CSS grandes / antigos


13

Atualmente, estou trabalhando em um site de 100.000 páginas, o design atual existe há mais de 5 anos e as atualizações sucessivas resultaram em mais de 12.000 arquivos CSS de linha.

Obviamente, o CSS se tornou pesado, muitos dos estilos são duplicados e é quase impossível saber quantos dos estilos estão realmente sendo usados.

Podemos minimizar, mas isso não está realmente resolvendo o problema, apenas atrasando o inevitável retrabalho.

Então, três perguntas existem ferramentas disponíveis para ...

  • desduplicar arquivos CSS grandes?
  • varrendo o site e registrando a classe CSS e o uso de ID?
  • essa digitalização poderia ser realizada com algum tipo de script, talvez greasemonkey?

Respostas:


17

http://unused-css.com/ Faz parte do que você pergunta e eles têm isso a dizer: -

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. Essa 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 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 de trilhos. 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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.