Formatador e Minificador de CSS online
Cole seu CSS abaixo e escolha entre formatar (indentado e legível) ou minificar (compacto, pronto para produção).
Por que formatar e minificar CSS?
Formatação (prettify) adiciona indentação e quebras de linha para facilitar a leitura e manutenção do código. É essencial durante o desenvolvimento.
Minificação remove todos os espaços, comentários e quebras desnecessárias, reduzindo o tamanho do arquivo. Em produção, isso acelera o carregamento da página.
Quanto a minificação de CSS economiza?
Em média, a minificação de CSS reduz o tamanho do arquivo em 20% a 40%. Em projetos com frameworks como Bootstrap ou Tailwind, a redução pode ser ainda maior antes de aplicar compressão gzip.
Importante: a minificação e a compressão são complementares. O gzip no servidor comprime o arquivo já minificado, multiplicando os ganhos.
Diferença entre minificação e compressão
| Técnica | O que faz | Quem processa |
|---|---|---|
| Minificação | Remove caracteres desnecessários | Arquivo no disco |
| Compressão (gzip/brotli) | Comprime os bytes do arquivo | Servidor HTTP |
As duas técnicas se complementam: minifique o CSS e habilite gzip no servidor para o melhor resultado.
CSS crítico vs CSS não-crítico
CSS crítico é o conjunto mínimo de regras necessárias para renderizar o conteúdo visível na tela sem scroll (above the fold). Pode ser embutido inline no <head> para eliminar o bloqueio de renderização.
CSS não-crítico pode ser carregado de forma assíncrona ou diferida, melhorando o LCP (Largest Contentful Paint).
Ferramentas populares de minificação CSS
- cssnano: minificador moderno baseado em PostCSS, usado pelo Vite e webpack
- clean-css: amplamente utilizado em projetos Node.js
- LightningCSS: minificador de alta performance escrito em Rust
Como automatizar com build tools
Vite (padrão de produção):
// vite.config.js
export default {
build: {
cssMinify: true // habilitado por padrão em produção
}
}webpack + css-minimizer-webpack-plugin:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new CssMinimizerPlugin()],
},
};Perguntas frequentes
Minificar CSS afeta a renderização?
Não. O CSS minificado funciona identicamente ao CSS formatado — apenas os caracteres de formatação (espaços, quebras de linha) são removidos. O resultado visual é exatamente o mesmo.
Qual a diferença entre minificação e gzip?
A minificação reduz o tamanho do arquivo no disco. O gzip comprime os bytes no momento da transferência HTTP. Ambos reduzem o tamanho percebido pelo usuário, mas operam em momentos diferentes. Use os dois juntos para o melhor resultado.
Posso minificar CSS com variáveis customizadas (--var)?
Sim. Variáveis CSS (--cor-primaria: #333) são preservadas corretamente na minificação — apenas os espaços ao redor de : e ; são removidos.
Como debugar CSS minificado?
Use as DevTools do browser, que geralmente fazem pretty-print automático do CSS. Se tiver source maps (.map), o browser mostrará o código original mesmo ao inspecionar o minificado.