# Como encontrar CSS morto e otimizar estilos

> Técnica simples para identificar e remover CSS morto em produção. Descubra como otimizar estilos e melhorar performance eliminando código legado. Limpe!

URL: https://dpw.dev/css/css-morto-otimizar-estilos/  
Publicado em: 2018-08-13  
Categoria: css  
Tags: performance, planejamento  
Autor: Tárcio Zemel

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.

> Artigo baseado em [Finding Dead CSS](https://csswizardry.com/2018/01/finding-dead-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](/images/blog/css-morto-otimizar-estilos/css-morto-exemplo-css-ruim.webp)

Então, **como é possível identificar esse código morto?** Ferramentas como [uncss](https://github.com/giakki/uncss), embora muito poderosas, não se encaixam especificamente para o caso. O ideal seria uma tecnologia do tipo [Real User Monitoring](https://en.wikipedia.org/wiki/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:

```scss
#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:

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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml