Remover CSS não utilizado online
Cole o HTML e o CSS, e mantenha só as regras que correspondem a algo na página.
Remover CSS não utilizado online
O PurgeCSS popularizou a ideia: comparar uma folha de estilos com o markup que a usa e descartar toda regra que não corresponde a nada. Esta página faz isso no seu navegador. Ela abre o Removedor de CSS não utilizado na aba HTML + CSS, onde você cola a página e a folha de estilos, e nada sai da sua máquina.
O que é mantido
- Uma regra com pelo menos um seletor que corresponde a um elemento do HTML.
- Um seletor com estado ou pseudoelemento, como
.btn:hoverou.icon::before, quando o elemento sem essa parte existe. - Tudo o que estiver em Manter sempre: nomes de classes, ids com ou sem
#, e padrões entre barras. - Qualquer seletor que o navegador não consiga interpretar, em vez de um palpite.
@font-facesempre, e@keyframesenquanto uma regra mantida ou um estilo inline ainda citar a animação.
As classes que você não vê
O HTML que você cola é um retrato instantâneo. Os scripts adicionam classes enquanto a página roda: um menu aberto, um slide ativo, um cabeçalho fixo, um erro de validação. As regras delas parecem não usadas porque o retrato não tem nenhum elemento com essas classes. Coloque-as em Manter sempre. Frameworks e construtores de páginas costumam compartilhar um prefixo, então um único padrão como /^is-/ ou /^elementor-/ cobre uma família inteira. Se você puder gravar a página no Chrome, a página Coverage JSON para CSS vê o que o navegador realmente aplicou, inclusive essas classes de tempo de execução.
Um exemplo
Uma landing page baseada em Bootstrap que usa um grid, uma navbar e dois estilos de botão ainda carrega o framework inteiro. Cole a página e a folha de estilos, adicione a Manter sempre as classes que a navbar alterna, como show e collapsing, e a maior parte do framework sai. A lista Seletores removidos mostra o que foi embora, e é o lugar mais rápido para pegar uma classe que deveria ter ficado.
Online ou no build
Para uma página avulsa, um template ou um e-mail, esta página é mais rápida do que instalar qualquer coisa. Para um site que muda, rode o PurgeCSS no build para que o CSS seja limpo de novo toda vez que o markup mudar: npx purgecss --css css/style.css --content index.html --output dist/css/. De qualquer forma, teste a página em todas as larguras antes de substituir a folha de estilos original.