Minificador e Formatador de CSS

O que é esta ferramenta?

Um minificador de CSS reescreve uma folha de estilo para ser o mais pequena possível sem alterar a forma como é apresentada: remove comentários e espaços em branco, encurta valores de cor e unidades zero quando seguro, junta regras duplicadas e remove ponto e vírgula redundantes.

Esta ferramenta é construída sobre o clean-css, um otimizador de CSS que efetivamente analisa a folha de estilo numa AST em vez de utilizar expressões regulares, razão pela qual consegue tratar com segurança casos limite que quebram minificadores ingénuos — propriedades personalizadas do CSS (--main-color: ...), conteúdo dentro de strings, e seletores complexos e media queries ficam todos corretos.

Por que usar?

• Minificação baseada em AST (clean-css), não expressões regulares — segura com propriedades personalizadas, strings e media queries aninhadas.
• As otimizações de nível 2 juntam e simplificam regras para poupanças adicionais, para além da simples remoção de espaços em branco.
• Veja exatamente quantos bytes e que porcentagem poupou.
• O modo Formatar transforma uma folha de estilo minificada de volta em CSS legível, com indentação consistente.
• Processamento 100% local — estilos proprietários ou não publicados nunca saem do seu navegador.

Como usar

1. Cole o seu CSS na caixa de entrada, ou clique em «Carregar exemplo» para experimentar uma amostra com uma propriedade personalizada e uma media query.
2. Clique em «Minificar» para o comprimir, ou em «Formatar» para o embelezar com indentação de 2 espaços.
3. Verifique a mensagem por baixo das caixas — o modo minificar mostra a redução de tamanho; CSS inválido mostra um erro claro, em vez de produzir silenciosamente um resultado corrompido.
4. Clique em «Copiar» para obter o resultado.

Exemplo

Entrada

:root {
  --main-color: #4f46e5;
}

.card {
  color: var(--main-color);
  padding: 16px;
}

@media (max-width: 600px) {
  .card {
    padding: 8px;
  }
}

Resultado

:root{--main-color:#4f46e5}.card{color:var(--main-color);padding:16px}@media (max-width:600px){.card{padding:8px}}

A propriedade personalizada, a media query e a ordem da cascata são todas preservadas — apenas os espaços em branco, comentários e caracteres redundantes são removidos.

Dicas práticas

• Minifique na altura do build/deploy, não durante o desenvolvimento — edite a fonte legível e deixe esta ferramenta (ou o seu pipeline de build) produzir a versão publicada.
• Se estiver depurando por que motivo uma página parece diferente em produção, formatar primeiro o CSS minificado torna a comparação com a sua fonte muito mais fácil de ler.
• As propriedades personalizadas sobrevivem à minificação, pelo que folhas de estilo baseadas em design tokens (utilizando --spacing, --color-*, etc.) podem ser processadas em segurança por esta ferramenta.
• Combine com os minificadores de HTML e JS abaixo se o seu projeto mantiver tudo em arquivos separados antes de um lançamento.

Onde isto se enquadra em fluxos de trabalho reais

O CSS é uma das coisas com maior benefício ao minificar, porque as folhas de estilo bloqueiam a renderização por defeito — cada byte reduzido numa folha de estilo pode diminuir ligeiramente o first paint, especialmente em ligações mais lentas. É um ganho menor do que a otimização de imagens, mas é essencialmente gratuito depois de integrado num passo de build.

A direção Formatar é útil para o problema oposto: inspecionar uma folha de estilo de um concorrente ou de uma produção legada que é publicada minificada, para compreender a sua estrutura antes de escrever um override ou um redesenho.

→ Minificador de HTML · Minificador de JavaScript

Casos de utilização comuns

• Reduzir uma folha de estilo antes de fazer o deploy de um site estático ou landing page.
• Reformatar um arquivo CSS minificado obtido de um site ao vivo para estudar a sua estrutura.
• Limpar CSS exportado de uma ferramenta de design, que frequentemente inclui comentários e espaços em branco excessivos.
• Verificar rapidamente se um excerto de CSS escrito à mão é analisado corretamente, já que CSS malformado surge como um erro explícito.

Perguntas frequentes