Como usar: Minificador CSS
- Cole seu CSS, arraste um arquivo
.csspara a entrada ou clique em Exemplo. - Deixe as otimizações ativadas (todas são seguras) ou desmarque as que você não quiser.
- Confira a economia abaixo do editor e depois clique em Copiar ou Baixar
styles.min.css. - Precisa ler um arquivo minificado? Troque para Formatar.
O que é minificação de CSS?
A minificação de CSS remove tudo o que o navegador não precisa — comentários, indentação, quebras de linha, o último ponto e vírgula de cada regra — e reescreve alguns valores em equivalentes mais curtos. A folha de estilos resultante funciona exatamente igual, mas é menor, então baixa e é interpretada mais rápido. Como o CSS é bloqueante para a renderização, um arquivo menor pode melhorar diretamente o First Contentful Paint e o Largest Contentful Paint.
O que este minificador altera
| Otimização | Antes | Depois |
|---|---|---|
| Comentários e espaços em branco | /* Buttons */ .btn , .link { … } | .btn,.link{…} |
| Último ponto e vírgula | {color:red;} | {color:red} |
| Cores | #FFFFFF, #aabbccdd | #fff, #abcd |
| Unidades em zero | margin:0px 0em | margin:0 0 |
| Números | 0.50rem, 1.0 | .5rem, 1 |
| Regras vazias | .unused{} | (removido) |
Por que é seguro
Minificadores agressivos às vezes quebram folhas de estilos. Este aplica apenas transformações que não alteram o comportamento:
- Strings, valores de
url()e caracteres escapados são protegidos e nunca modificados. - As unidades só são removidas de comprimentos —
0s,0dege0%mantêm a unidade (transition: 0se os seletores de keyframes precisam dela), e nada dentro decalc(),min()ouclamp()é alterado, porquecalc(0 + 10px)é inválido. - A abreviação
flexé ignorada (flex: 1 1 0pxeflex: 1 1 0nem sempre são iguais em motores mais antigos), e os valores de propriedades customizadas perdem apenas espaços redundantes. - Os espaços em seletores são mantidos onde têm significado:
a :hover(qualquer descendente em hover) é diferente dea:hover. @layer name {}é mantido mesmo vazio, porque declara a ordem das camadas. Comentários de licença que começam com/*!são preservados por padrão.
Minificação vs. compressão
Minificação e compressão gzip/Brotli se complementam. A compressão remove repetições; a minificação remove bytes que a compressão não consegue eliminar, como os comentários. A figura Saída com gzip mostra aproximadamente o que vai trafegar pela rede se o seu servidor comprimir as respostas (a maioria comprime). Para o maior ganho, remova também regras não utilizadas com uma ferramenta como o PurgeCSS, e insira no HTML apenas o CSS crítico do conteúdo acima da dobra.
Quer inspecionar um arquivo minificado? Use o modo Formatar aqui ou o Formatador CSS. Quer verificar o desempenho de uma página inteira? Faça um teste de velocidade da página.
Também pesquisado como: minificar css, compressor de css, comprimir css, otimizar css, reduzir tamanho css, minificador css online, alternativa ao cssnano, css uglify.
Ferramentas que combinam com: Minificador CSS
- Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
- Formatador JavaScript — Desminifique e deixe legível JavaScript, JSON ou JSX com a indentação e o estilo de chaves que você preferir, ou remova espaços e comentários com um minificador verificado.
- Compressor de imagens — Reduz o tamanho das fotos e dos gráficos em 50–90% sem perda visível de qualidade.
- Formatador SQL — Cole uma query — ou um script de migração inteiro — e receba um SQL legível, com uma cláusula por linha, joins alinhados e palavras-chave com caixa consistente, seguindo a gramática do seu banco.
Perguntas frequentes
A minificação pode quebrar meu CSS?
calc()). Se o seu CSS original tiver erro de sintaxe, o erro continua na saída, então valide o CSS que se comporta de forma estranha.Quanto meu CSS vai diminuir?
Eu ainda devo usar gzip ou Brotli?
Por que alguns comentários são mantidos?
/*! costumam conter avisos de licença que devem permanecer com o código. Desmarque “Manter comentários /*! licença */” para removê-los também.