Minificador de CSS

Como usar

1. Cole seu CSS, abra um arquivo .css ou comece pelo exemplo.
2. O CSS minificado aparece enquanto você digita, com o tamanho antes e depois.
3. Copie ou baixe como styles.min.css.

O que faz

O Minificador de CSS usa o CSSO, que vai além de remover espaços e comentários:

• Encurta valores: #ff0000 vira red, 0px vira 0, e padding: 0 16px 0 16px vira padding: 0 16px.
• Junta regras com o mesmo seletor, e seletores com as mesmas declarações.
• Remove declarações que uma posterior na mesma regra sobrescreve.

Ele só faz mudanças que mantêm o significado da folha de estilos, então as páginas ficam iguais.

Vale a pena?

Folhas de estilos impedem a página de aparecer até carregarem, então um CSS menor significa uma primeira renderização mais rápida. Minificar costuma economizar mais 5 a 15% além da compressão gzip ou Brotli que a sua hospedagem aplica, mais quando a folha tem muitos comentários. Se você usa uma ferramenta de build como o Vite, ela já minifica o CSS para produção; esta página é para folhas de estilos que você escreve e publica à mão.

Perguntas frequentes

Minificar pode quebrar meu CSS?

As mudanças do CSSO mantêm o significado do CSS válido. Hacks que dependem de sintaxe inválida para navegadores antigos podem não sobreviver. Guarde a versão legível como fonte e minifique uma cópia.

Ele remove CSS não usado?

Não: ele não consegue ver quais seletores suas páginas usam. Ferramentas como o PurgeCSS fazem isso durante um build.

Como recupero a versão legível?

Guarde o original. O Formatador de CSS recua de novo o CSS minificado, mas os comentários se perdem para sempre.

Meu CSS é enviado para algum lugar?

Não. Ele é minificado no seu navegador.