Note que, pelo que consta no título, este artigo não trata de encontrar “CSS não usado”, mas realmente CSS morto (ou CSS inativo). Através de uma técnica simplíssima e que praticamente não acarreta custos, é possível encontrar estilos legados e melhorar a performance do CSS.
Imagine que exista um projeto grande e de longa duração, que contenha centenas de milhares de linhas de código, com participação de dezenas de desenvolvedores em várias equipes diferentes — exemplo meramente fictício, já que não é possível encontrar código assim em produção, certo…?
Não é só muito provável que ele contenha CSS não usado, mas também é provável que exista código completamente inativo: recursos inteiros que foram desatribuídos, mas cujo código nunca foi excluído; “becos sem saída” no aplicativo que são muito difíceis de encontrar; páginas no site que podem ser impossíveis de alguém acessar, mas cujo legado está ativo.
Então, como é possível identificar esse código morto? Ferramentas como uncss, embora muito poderosas, não se encaixam especificamente para o caso. O ideal seria uma tecnologia do tipo Real User Monitoring (RUM), para tornar possível saber o que de CSS morto realmente está sendo mostrado (ou não).
Acontece que há uma solução muito simples e de baixíssimo custo… :-)
Passo-a-passo para encontrar CSS morto
Digamos que se tenha um fluxo legado de checkout; um sistema antigo de reservas que foi sendo gradualmente eliminado ao longo de vários meses ou anos. Agora, o projeto se encontra em um ponto em que acredita que, pelo menos em teoria, todos os clientes e usuários finais foram movidos para o novo fluxo e, portanto, é possível começar a excluir código.
A primeira coisa a ser feita é começar com uma hipótese: o que se supõe ser CSS morto? Identifica-se um seletor CSS que não se esperaria mais que fosse encontrado — por exemplo, #checkout_wrapper.
Em seguida, cria-se um GIF transparente de 1×1px com nome correlacionado, que será colocado no diretório morto dead — por exemplo, /assets/img/dead/checkout_wrapper.gif.
Depois disso, só é preciso definir essa imagem específica como background no seletor correspondente no CSS:
|
1 2 3 4 |
#checkout_wrapper { background-image: url('/assets/img/dead/checkout_wrapper.gif'); /* Mais código morto */ } |
Por fim, colocar essa alteração em produção, sentar e esperar.
Após algum tempo — digamos, uns 2 ou 3 meses –, é necessário verificar os logs do servidor em busca de qualquer solicitação para essa nova imagem. Caso não haja registros, significa que ninguém teve esse componente legado renderizado em tela: provavelmente, é seguro excluí-lo sumariamente.
Se se encontrar registros para a imagem, concluir-se-á que, de alguma forma, o recurso legado ainda está potencialmente acessível — neste caso, o número de vezes em que apareceu nos logs ajuda a fornecer uma pista sobre a gravidade do problema.
Conclusão
Resumidamente, os passos a serem seguidos para se identificar CSS morto são:
- Identificar potencial CSS morto que, provavelmente, não está sendo mais apresentado
- Criar o famoso pixel transparente em uma pasta específica (ex:
dead) - Definir este pixel como background do elemento/componente “suspeito”
- Esperar e colher os resultados
Obviamente, essa técnica não é totalmente à prova de falhas, mas começa a fornecer um bom teste decisivo e, espera-se, alguns insights úteis sobre como é possível se livrar de CSS morto para otimizar a base de códigos e performance de projetos web.