Processamento local

FERRAMENTAS PARA DESENVOLVEDORES

Minificar CSS

Deixe a folha de estilos no tamanho mínimo removendo tudo o que o navegador não precisa para interpretá-la.

Usar ferramenta

CODE EDITOR

CSS Minifier

Local processing · professional engine · your code is never sent

CSS · ready to process
CSSinput.css
0 linesCSS
CSSminified.cssPreview
0 linesRead onlyCSS

Por que o CSS bloqueia a renderização

Diferente de um script adiado, a folha de estilos bloqueia a primeira pintura: o navegador não mostra nada até tê-la. Por isso o peso dela importa mais do que o tamanho em disco sugere, e é onde minificar rende mais do que em JavaScript.

O que é removido

Comentários, espaços entre seletores e declarações, quebras de linha e o ponto e vírgula final de cada bloco. Nomes de classe e valores ficam iguais: não há renomeação nem reescrita de propriedades.

A maior economia não está aqui

Vale dizer com clareza: numa folha de estilos real, o que mais pesa costumam ser as regras que ninguém usa mais. Minificar também comprime o CSS morto. Se quer melhoria séria, primeiro remova o que não se aplica e depois minifique o que sobrar.

PERGUNTAS FREQUENTES

Minha folha de estilos é enviada para um servidor?

Não. É processada no seu navegador, então dá para minificar CSS de projeto privado sem que saia da sua máquina.

Muda a aparência da página?

Não. Só some o que o navegador ignora ao interpretar o CSS.

Dá para reverter?

Você pode reindentar com o formatador, mas os comentários não voltam.

Remove regras não usadas?

Não. Para isso é preciso analisar o HTML que consome a folha, e isso é outra ferramenta.