Como faço para minimizar o CSS no código VS?

O VS Code não possui um comando Minify integrado, então você instala uma extensão (como um comando "Minify") ou executa uma ferramenta de compilação como Esbuild, Lightning CSS ou CSSNANO em salvar. Para um rápido único sem configurar nada, cole aqui o seu CSS e clique em Minify - ele é executado no navegador e mostra a economia de bytes exatos.

A minificação quebra meu CSS?

não . Esse minificador apenas remove caracteres que são comprovadamente redundantes: comentários, espaços em branco extras, ponto e vírgula à direita e sufixos de unidade em comprimentos zero. Ele analisa literais de string, valores url() e expressões calc() antes de tocar em qualquer coisa, então construções sensíveis ao espaço em branco como calc(100% - 20px) e seletores descendentes como div: hover saem byte por byte semanticamente idênticos.

Quanto o Minifying CSS realmente economiza?

As folhas de estilo escritas à mão normalmente encolhem de 25 a 40%; arquivos comentados podem cair mais da metade. Se você servir GZIP ou Brotli, a economia de fio será menor - geralmente 5 a 15% em cima da compressão - mas a entrada miniificada também se comprime mais rápido e analisa mais rapidamente no navegador. O selo de economia mostra seus números exatos para que você nunca tenha que adivinhar.

Por que devo minimizar o CSS se meu servidor já usa o gzip?

GZIP e minificação são complementares, não intercambiáveis. O gzip não pode remover comentários ou encurtar #ffffff para #fff - ele só pode codificá-los de forma mais compacta - então minify-then-gzip é sempre menor que gzip sozinho. O navegador também precisa descomprimir e analisar o texto original completo, e a análise de CSS está no caminho crítico de renderização.

Os comentários da minha licença /*! foram removidos?

não Os comentários que começam com /*! são preservados por padrão, seguindo a mesma convenção que Terser, CSSnano e Clean-CSS. Isso significa que os cabeçalhos de licenças de bibliotecas como Normaliza.css sobrevivem à minificação, mantendo você em conformidade com os requisitos de atribuição.

É seguro encurtar o #AABBC para o #ABC?

Sim - uma cor hexagonal de três dígitos é definida pela especificação do CSS como uma expansão de cada dígito, então #ABC e #AABBCC são exatamente da mesma cor. A ferramenta reduz apenas os valores de seis dígitos onde cada par se repete, e nunca toca em cores hexagonais de oito dígitos com canais alfa ou qualquer coisa dentro de uma string ou url().

A remoção de unidades de valores zero (0px → 0) causará problemas?

Não por comprimentos - a especificação CSS diz que um comprimento zero não precisa de unidade, portanto, margem: 0px e margem: 0 são idênticos. A ferramenta deixa deliberadamente 0%, 0s e 0deg sozinhos porque essas unidades podem ser significativas (0% em quadros-chave é um seletor e o tempo de animação precisa de sua unidade), e pula tudo entre parênteses para que o calc() nunca seja afetado.

Posso cancelar a minimização de um pacote de produção de CSS para o qual não tenho a fonte?

Sim - é exatamente para isso que serve o botão de embelezamento. Ele expande o CSS de uma única linha em uma declaração por linha com recuo adequado e uma linha em branco entre as regras, o que o torna prático para diff, leitura ou depuração de um pacote de fornecedor. Nota Ele restaura a formatação, não os comentários originais ou a estrutura da fonte, pois eles foram removidos no momento da compilação.

Devo minimizar no navegador ou no meu pipeline de construção?

Para um aplicativo de produção, mantenha a minificação em seu pipeline de compilação (CSSNANO, ESBUILD, Lightning CSS) para que seja automático e repetível. Essa ferramenta brilha para todo o resto: ativos pontuais rápidos, CSS de e-mail, estilos injetados com CMS, inspecionando quanto um arquivo encolheria ou embelezando um pacote durante um incidente quando você não pode reconstruir.

Essa ferramenta oferece suporte a SCSS, menos ou aninhados CSS?

Ele foi criado para CSS padrão, incluindo aninhamento nativo moderno, consultas de mídia e propriedades personalizadas - qualquer coisa que um navegador possa analisar. A sintaxe somente do pré-processador, como variáveis SCSS ou menos mixins, deve ser compilada primeiro para o CSS, porque a mineração de uma fonte não compilada pode alterar o que o pré-processador gera.

Meu CSS foi carregado em um servidor?

não Minificações e embelezamento são executados inteiramente em seu navegador com o JavaScript simples - nada é transmitido, registrado ou armazenado em qualquer lugar. Você pode verificar isso na guia Rede: nenhuma solicitação é feita ao clicar em Minify. Ele ainda funciona offline depois que a página é carregada.

Minificador de CSS e embelezador

Minify CSS para cortar o tamanho do arquivo ou embelezar as folhas de estilo Minificadas para depuração

Indent:

Input CSS

Output

Output will appear here...

O que é CSS Minifier & Beautiffier?

CSS Minifier & Beautifier é uma ferramenta de duas vias: ele comprime o CSS removendo tudo o que o navegador não precisa - comentários, espaço em branco, ponto e vírgula redundante, cores hexagonais de formato longo e unidades em valores zero - e pode reverter o processo, expandindo um pacote de produção de linha única de volta a regras legíveis e devidamente indentadas. Cada byte que você tira de uma folha de estilo de bloqueio de renderização é um byte que o navegador baixa e analisa mais cedo, que alimenta diretamente as métricas principais da Web Vitals, como o primeiro Contentful Paint e o Maior Contentful Paint.

O Minifier é deliberadamente conservador. Ele está totalmente ciente dos literais de string, valores url() e expressões calc(), portanto, nunca remove o espaço em que calc(100% - 20px) depende, nunca reescreve o texto semelhante a uma cor de uma string de conteúdo e nunca toca no espaçamento que distingue div :hover de div:hover. Em folhas de estilos típicas, você pode esperar uma redução de 25 a 40% antes do gzip; combinado com gzip ou brotli no fio, a minificação ainda raspa uma fatia significativa porque a compressão funciona melhor em entradas repetitivas e sem comentários.

Tudo roda 100% do lado do cliente no seu navegador. Seu CSS nunca é carregado, registrado ou armazenado em qualquer servidor, o que significa que você pode colar com segurança o código do sistema de design, estilos de produto inéditos ou trabalho do cliente. Ele também funciona offline depois que a página é carregada - útil quando você precisa de um rápido Minify Pass sem conectar um pipeline completo do PostCSS ou do ESbuild.

A minificação aqui é compatível com sintaxe em vez de um conjunto de regras de localização e substituição, que é o que torna seguro executar em folhas de estilo de produção: espaço em branco dentro de strings, valores url() e seletores de atributos são deixados sozinhos, pois removê-lo mudaria o que o CSS corresponde. Os comentários que começam com um ponto de exclamação são mantidos, que é a convenção para os cabeçalhos da licença que precisam sobreviver a uma construção.

Como usar o Minifier CSS e o Embelezador?

Cole seu CSS
Solte sua folha de estilo na área de entrada - uma única regra, um arquivo de componente ou um pacote de produção completo. São aceitos CSSs formatados e já minificados.
Escolha Minificar ou Embelezar
Clique em Minify para compactar para produção ou embelezar para expandir o código minificado em uma declaração por linha com uma linha em branco entre as regras. Para embelezar, escolha primeiro o recuo preferido.
Verifique o selo de poupança
A ferramenta relata o tamanho exato do antes/depois e a mudança percentual (por exemplo, "12,4 KB → 8,1 KB, -34%"), para que você saiba exatamente qual a transformação o comprou antes de enviá-la.
Copie ou baixe
Copie o resultado para sua área de transferência com um clique ou faça o download como um arquivo .css pronto para ser lançado na saída de build ou no CDN.

Principais características

Minificação segura e com reconhecimento de sintaxe
Respeita literais de string, valores url() e espaçamento calc() - ele comprime agressivamente sem nunca corromper o CSS válido
Curta hexagonal e valor zero
Reescreve #FFFFF para #FFF e 0px para 0 onde comprovadamente seguro, espremendo bytes extras além da remoção simples do espaço em branco
Preservação de comentários de licença
Mantém os comentários intactos e /*! O Banner intacto para que os cabeçalhos das licenças da biblioteca sobrevivam à minificação, combinando o comportamento padrão da ferramenta de construção
Embelezador com um clique
Expande os pacotes minificados em regras legíveis com recuo de espaço configurável 2, 4 ou 8 para depurar problemas de produção

Frequently Asked Questions

A minificação de CSS é o processo de remoção de cada personagem que um navegador não precisa renderizar uma folha de estilo - comentários, espaços em branco, quebras de linha, ponto e vírgula à direita - e encurtar valores seguros como #ffffff para #fff. O resultado é um CSS funcionalmente idêntico em menos bytes, que baixa e analisa mais rapidamente. Como as folhas de estilo são bloqueando render, o CSS menor melhora as métricas, como o primeiro Contentful Paint.