Minificador de CSS
Cole sua folha de estilos: comentários, espaços extras e quebras de linha desaparecem com um clique, com a porcentagem de bytes economizados.
Por que minificar seu CSS?
Cada espaço, quebra de linha e comentário de uma folha de estilos é um byte que o navegador baixa, mas nunca usa: na maioria dos CSS escritos à mão, a minificação reduz o tamanho do arquivo em 15–30%. Um arquivo mais leve significa um First Contentful Paint mais rápido, uma nota melhor no Core Web Vitals e menos dados gastos por quem acessa por conexão móvel. É uma das otimizações mais simples e sem nenhuma desvantagem: para o navegador, o CSS minificado se comporta exatamente como o original.
O que esta ferramenta remove (e o que ela preserva)
Ela remove /* … */ comentários, quebras de linha, indentação, espaços ao redor de chaves, dois-pontos, vírgulas e combinadores, e o ponto e vírgula final antes de
}. As strings entre aspas e o conteúdo de url(…) são protegidos e devolvidos intactos: uma regra content: "a b" ou um caminho com espaços não será alterado. Seletores, propriedades e valores ficam exatamente como você os escreveu.
A compressão do servidor já faz metade do trabalho
Quase todo servidor envia o CSS comprimido com gzip ou brotli, e esses algoritmos são excelentes justamente com esse tipo de texto repetitivo: espaços, indentação e nomes de propriedades que se repetem mil vezes comprimem muito bem. Em uma folha de estilos já comprimida, a minificação ganha bem menos do que a queda no número de caracteres sugere.
O ganho continua real por dois motivos: o arquivo ocupa menos memória depois de descomprimido e o navegador o interpreta mais rápido. Em um site pequeno são poucos kilobytes; em um projeto com dez folhas de estilo a soma começa a pesar.
O que um minificador não deve tocar
Dentro de strings e URLs, os espaços são conteúdo, não formatação: remover um espaço dentro de content: "a b" muda o que aparece na página. O mesmo vale para o conteúdo das URIs data: incorporadas, onde um caractere a menos quebra a imagem.
A outra área delicada são os cálculos e seletores: dentro de calc() os espaços ao redor do mais e do menos são obrigatórios pela sintaxe, e no seletor a > b o espaço pode sair, enquanto em a b não pode, porque ali o espaço É o combinador descendente.
O arquivo minificado não se edita
Um CSS minificado é um arquivo gerado, não uma fonte: você edita o original e gera de novo. Corrigir direto o arquivo minificado leva a duas versões divergentes, e na primeira vez que alguém gerar de novo, a correção some sem deixar rastro.
Pelo mesmo motivo, o arquivo minificado não deve ficar no controle de versão se o projeto já tem uma etapa de build: são milhares de linhas que mudam todas a cada build e deixam o histórico ilegível. Se o site for feito à mão, manter os dois arquivos é o único caminho, e então vale a regra acima.
Veja também
Para JSON existe o Formatar e validar JSON, e se o seu CSS está ilegível porque já foi minificado, o caminho inverso fica dentro da mesma ferramenta. Para gerar regras em vez de limpá-las, veja o Gerador de gradiente CSS.