Como encontrar CSS morto e otimizar estilos

Conheça uma técnica simples e de baixíssimo custo para identificar CSS morto e otimizar o código e performance de projetos web. Você vai se surpreender!

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.

CSS morto: exemplo de CSS ruim que poderia ser identificado

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:

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:

  1. Identificar potencial CSS morto que, provavelmente, não está sendo mais apresentado
  2. Criar o famoso pixel transparente em uma pasta específica (ex: dead)
  3. Definir este pixel como background do elemento/componente “suspeito”
  4. 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.