Minificador de CSS
Encolha arquivos CSS e veja exatamente quanto você economizou.
Funciona no navegador. Nada do que você digita é enviado a lugar nenhum.
- Mostra bytes economizados
- Remove comentários
- Nada é enviado
Como minificar CSS
- Cole seu CSS.
- Confira o tamanho economizado na linha de estatísticas.
- Copie ou baixe o CSS minificado.
O que é removido
- Comentários escritos como /* ... */
- Espaço em branco e quebras de linha entre regras e declarações
- Um ponto e vírgula final logo antes de uma chave de fechamento
- Regras duplicadas ou redundantes, onde o csso consegue combiná-las com segurança
- Pontos e vírgulas extras e blocos de regra deixados vazios, sem declarações dentro
Economia de tamanho típica
| Ponto de partida | Redução aproximada |
|---|---|
| CSS escrito à mão com comentários | 20 a 30 por cento |
| CSS já compacto | 5 a 10 por cento |
| CSS gerado por um pré-processador | 10 a 20 por cento |
Quando minificar, e quando não
- Minifique pouco antes de fazer o deploy, não enquanto está editando ativamente, já que uma folha de estilo legível é muito mais fácil de depurar.
- Pule a minificação de um arquivo que já é servido comprimido em gzip e pequeno, onde a diferença de tamanho não vale a etapa extra de build.
Quando minificar faz mais diferença
- Folhas de estilo compartilhadas em muitas páginas, já que os bytes economizados se multiplicam a cada carregamento de página.
- Design systems grandes ou bibliotecas de componentes com muitas regras repetidas e combináveis.
- Sites sem pipeline de build, onde CSS escrito à mão é servido direto sem nenhuma outra etapa de minificação.
- Um framework CSS reduzido só às classes utilitárias realmente usadas na página.
Perguntas frequentes sobre Minificador de CSS
Quanto menor meu CSS vai ficar?
Normalmente de 10 a 30 por cento, mais se o original tiver muitos comentários e espaço em branco, menos se já for compacto.
Minificar muda a aparência da minha página?
Não. Minificar só remove espaço em branco, comentários e sintaxe redundante. As regras que se aplicam à sua página continuam as mesmas.
Isso combina regras duplicadas?
Sim, onde é seguro fazer isso, o que pode encolher o arquivo ainda mais do que só remover espaço em branco.
Devo guardar o arquivo original?
Sim. Guarde a versão legível para editar e use a minificada só em produção.
Qual minificador isso usa?
csso, o mesmo minificador de CSS usado por vários plugins de bundler. Ele também combina algumas regras duplicadas e redundantes além de só remover espaço em branco.
CSS minificado ainda é seguro para colar em uma folha de estilo?
Sim, é CSS padrão com o espaço em branco removido. Qualquer navegador ou ferramenta de build lê exatamente igual ao original.
Remove prefixos de fornecedor que eu ainda preciso, tipo -webkit-?
Não. Propriedades e valores com prefixo de fornecedor ficam exatamente como escritos. Minificar só remove espaço em branco, comentários e regras que podem ser combinadas com segurança, nunca uma propriedade que seu CSS realmente declara.
O que acontece com propriedades personalizadas do CSS (variáveis)?
Elas são mantidas como estão, incluindo os nomes -- e os valores, já que minificar não renomeia nem resolve propriedades personalizadas.