Klaus Paiva

Todo mundo que já mexeu em um arquivo CSS “legado” vai saber do que estou falando: adicionar novas regras a um arquivo CSS é fácil, difícil é remover as regras que não são mais usadas.

A dúvida é sempre a mesma: “será que não tem nenhuma ‘tela’ que usa essas regras?”. E como a resposta nem sempre é fácil de se descobrir, deixo aqui uma dica de ferramenta que pode ajudar nessa tarefa.

Trata-se da extensão de Firefox de nome “CSS Usage“. O que ela faz, conforme o nome já sugere, é identificar quais regras na folha de estilo de um site que estão em uso e quais não estão. Com base nessas informações você pode reduzir seu arquivo CSS sem medo!

Após instalar a extensão, basta abrir o Firebug e você verá uma aba “CSS Usage“. Entrando nela você pode iniciar o processo e verificar a utilização dos seletores. Depois disso é só fazer a limpeza, conforme você achar melhor.

Para que o efeito da extensão seja o esperado, é importante que você navegue no máximo de páginas possíveis de seu site para garantir que todas as “telas” serão testadas de acordo com as regras na sua folha de estilos. E se você acha que dá muito trabalho ter de navegar em todas as páginas sempre que quiser limpar seu CSS, acho que é hora de você conhecer o Selenium!

Aqui tem uma figura de exemplo com os resultados da extensão obtidos após uma navegação no Taperás.

Via Smashing Magazine no Twitter.