RevealTheme logo

Minificador de CSS

Remova comentários, espaços em branco e caracteres desnecessários do CSS para reduzir o tamanho do arquivo.

Como usar esta ferramenta

  1. 1

    Paste your CSS — a single rule, a component stylesheet, or an entire file.

  2. 2

    The minified result and the byte savings appear instantly below the input.

  3. 3

    Copy the minified output, or compare the before/after byte count to see the reduction.

O que é o Minificador de CSS?

O CSS minificado carrega mais rápido: cada byte conta no caminho de renderização crítico. A minificação remove os comentários, colapsa os espaços em branco e simplifica a sintaxe (por exemplo, 'color: #ffffff' se torna 'color:#fff'). Para sites em produção, use um minificador em tempo de compilação como o cssnano; esta ferramenta serve para fragmentos de CSS pontuais.

Casos de uso comuns

  • Shrink a critical-CSS snippet you're inlining into the <head> to remove a render-blocking request.

  • Compress CSS for an HTML email or newsletter, where every kilobyte counts and there's no build pipeline.

  • Paste CSS into a CMS or page-builder field that doesn't minify automatically (WordPress 'Additional CSS', Shopify theme settings).

  • Check how much weight a third-party stylesheet adds before deciding whether to self-host it.

  • Clean up CSS copied from DevTools, which arrives with computed-style comments and inconsistent spacing.

  • Produce a one-line version of a rule to paste into a chat, ticket, or code-review comment.

Perguntas frequentes

A minificação vai quebrar o meu CSS?
Não: a minificação preserva a semântica. Se o seu CSS quebrar, a origem tinha erros de sintaxe que o navegador tolerava, mas o minificador não.
Quanta redução de tamanho posso esperar?
Entre 20% e 40% em CSS escrito à mão típico. Menos em CSS já comprimido de frameworks.

Ferramentas relacionadas