Minificador de CSS
Reduza uma folha de estilos removendo comentários e espaços, sem quebrar uma única regra.
Minificar CSS online
Cada byte de CSS precisa ser baixado e analisado antes que o navegador consiga renderizar a página, então vale a pena manter as folhas de estilo pequenas. Minificar remove tudo o que o navegador não precisa: comentários, indentação e espaços opcionais. Esta página é o Formatador de código configurado para CSS, com um exemplo já minificado para você.
O que fica e o que sai
| Antes | Depois |
|---|---|
.card { margin : 0 auto ; } | .card{margin:0 auto} |
width: calc(100% - 32px); | width:calc(100% - 32px) |
a > b | a>b |
/* comment */ | removido |
O espaço dentro de calc() precisa ficar, porque 100%-32px é CSS inválido. O mesmo vale para o espaço em 0 auto, que separa dois valores.
Minificar, comprimir ou os dois?
Minificação e compressão no servidor se somam. Gzip ou Brotli no servidor costumam deixar um arquivo CSS de 70 a 80% menor, e minificar antes economiza mais um pouco. Se a sua ferramenta de build já minifica, você não precisa desta página para produção; ela serve para os trechos que escapam do build: estilos inline em e-mails, CSS crítico colado em um head ou uma folha de estilos em um site sem etapa de build.
Ferramentas relacionadas
Para remover as regras que uma página nunca usa, o que economiza muito mais do que minificar, use o Removedor de CSS não utilizado. Para os scripts ao lado da folha de estilos, use o minificador de JavaScript.