Formatador CSS

Por que CSS formatado vale a pena

CSS não requer espaço em branco. Um navegador faz o parse de a{color:red} e a { color: red; } de forma idêntica. Mas os humanos não os leem da mesma forma. Uma folha de estilos que chega como uma longa linha é quase impossível de analisar — você não consegue ver os limites das regras, as cadeias de seletores ou os agrupamentos de declarações.

Formatar CSS também é um pré-requisito para controle de versão útil. Um git diff em CSS minificado mostra uma enorme linha modificada mesmo quando apenas um valor de cor mudou. CSS embelezado mostra exatamente qual propriedade mudou, em qual seletor, em qual bloco de regra.

Um seletor por linha — por que importa para diffs e legibilidade

Um seletor agrupado como:

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.25;
}

está ok para leitura, mas uma revisão de código que adiciona h6 ou remove h4 modifica uma linha mista. O diff fica ruidoso. A forma embelezada coloca cada seletor em sua própria linha:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.25;
}

Agora adicionar ou remover um nível de heading é um diff limpo de uma linha. Esse é o comportamento padrão do modo CSS do js-beautify e o formato que o Prettier usa para CSS.

Legibilidade da especificidade

A especificidade CSS determina qual regra vence quando duas regras apontam para o mesmo elemento. O cálculo (estilos inline → IDs → classes/atributos → elementos) é mais fácil de raciocinar quando cada regra está totalmente indentada e isolada. Folhas de estilos minificadas achatam tudo em uma linha — você precisa analisar mentalmente a cascata no nível de caractere.

Durante o desenvolvimento, mantenha o CSS embelezado. Durante a revisão de código, um diff formatado torna visíveis os conflitos de especificidade antes de chegarem à produção.

Minificação: economia real de bytes

A minificação CSS remove:

• Todo o espaço em branco entre tokens
• Comentários (/* ... */)
• Ponto e vírgula finais em blocos de regras
• Zeros iniciais em decimais (0.5em → .5em)

Uma folha de estilos realista pode encolher 25–40% após a minificação. O ponto crucial: a compressão HTTP (gzip ou brotli) é muito mais eficaz do que a remoção de espaço em branco. O gzip tipicamente alcança 60–80% de compressão em CSS porque o espaço em branco é altamente repetitivo:

| Arquivo | Bruto | Após minify | Após gzip | Após minify + gzip | |---------|-------|------------|----------|-------------------| | bootstrap.css | 187 KB | 153 KB | 26 KB | 24 KB |

A decisão correta: ative gzip/brotli no seu servidor e também minifique o CSS no seu pipeline de build. A combinação sempre supera qualquer uma das técnicas isoladas.

CSS Nesting (CSS Nesting Module Level 1)

O CSS moderno suporta aninhamento sem pré-processador. O CSS Nesting Module Level 1 (agora suportado em todos os navegadores evergreen) permite:

.card {
  padding: 1rem;

  & .title {
    font-size: 1.25rem;
  }

  &:hover {
    background: var(--color-hover);
  }
}

O modo CSS do js-beautify preserva corretamente a indentação do aninhamento. A minificação colapsa o aninhamento para sua representação de espaço mínimo mantendo a estrutura válida — não "desaninha" para CSS plano.

Shorthand vs longhand na saída minificada

Shorthands CSS como margin: 0 auto são menores que seu equivalente longhand. No entanto, converter automaticamente longhand para shorthand durante a minificação é arriscado: o shorthand reseta todas as sub-propriedades, não apenas as que você lista. Um minificador que converte cegamente pode alterar o comportamento da cascata.

O js-beautify não faz conversão de shorthands — apenas remove espaço em branco. Para otimização de shorthands, ferramentas como cssnano com o plugin postcss-merge-longhand lidam com isso com análise correta da cascata.

Source maps para depurar CSS minificado

Ao servir CSS minificado em produção, gere um source map para que as DevTools do navegador mostrem o arquivo original embelezado:

# PostCSS com cssnano
npx postcss styles.css --use cssnano -o styles.min.css --map

O arquivo .map resultante mapeia os offsets de bytes minificados de volta para as linhas de fonte originais. As DevTools o recuperam automaticamente quando o arquivo minificado contém /*# sourceMappingURL=styles.min.css.map */ no final.

Usando js-beautify para CSS

import beautify from 'js-beautify';

const pretty = beautify.css(rawCss, {
  indent_size: 2,
  selector_separator_newline: true,
  end_with_newline: true,
  newline_between_rules: true,
});

Para minificação em produção, prefira cssnano ou lightningcss (Rust, extremamente rápido):

import { transform } from 'lightningcss';

const { code } = transform({
  filename: 'styles.css',
  code: Buffer.from(rawCss),
  minify: true,
  sourceMap: true,
});

Privacidade

Todo o processamento CSS é executado completamente no seu navegador. Seus estilos nunca são transmitidos a um servidor.

Embelezar CSS muda como meus estilos são aplicados?

Não. O espaço em branco no CSS fora de valores de string e da propriedade content é insignificante para o parser do navegador. Indentação, quebras de linha entre regras e espaços ao redor de dois pontos são ignorados na renderização. Os estilos computados que sua página produz são idênticos antes e depois da formatação.

Por que um seletor por linha é o padrão no CSS embelezado?

Colocar cada seletor em sua própria linha produz diffs de git mais limpos. Quando um seletor agrupado como h1, h2, h3 { ... } ganha ou perde uma entrada, o formato de uma linha marca toda a linha de seletores como alterada. Um-seletor-por-linha significa que adicionar h4 ou remover h2 aparece como um diff limpo de uma linha sem ruído. Essa também é a razão pela qual o Prettier usa esse formato para CSS por padrão.

Quanto a minificação de CSS realmente economiza?

A remoção pura de espaço em branco tipicamente reduz o CSS em 20–40% dependendo do estilo de codificação. No entanto, o fator mais importante é a compressão HTTP: gzip reduz o CSS em 60–80% porque o espaço em branco é altamente repetitivo. Minificação e gzip são complementares — use ambos em produção. Minifique primeiro no seu pipeline de build, depois deixe seu CDN ou servidor aplicar gzip/brotli por cima.

Esta ferramenta suporta CSS Nesting?

Sim. O js-beautify preserva a sintaxe CSS Nesting (CSS Nesting Module Level 1, suportado em todos os navegadores evergreen) incluindo o seletor &. Tanto o modo embelezado quanto o minificado tratam regras aninhadas sem desaninhá-las para CSS plano.

O que é a opção de separador de seletores?

Controla como os seletores em uma regra agrupada são separados. Configure como quebra de linha (padrão) para um seletor por linha — preferido para legibilidade e diffs. Configure como espaço para seletores agrupados compactos em uma linha. Nenhuma altera como a regra é aplicada; é puramente uma preferência de formatação.

Devo usar esta ferramenta ou integrar cssnano no meu pipeline de build?

Ambos. Use esta ferramenta para formatação ad-hoc — colar fragmentos CSS, limpar uma folha de estilos pontual ou examinar CSS de terceiros. Para minificação automatizada em produção, integre cssnano (baseado em PostCSS) ou lightningcss (Rust, extremamente rápido) no seu passo de build. Ferramentas de pipeline também podem fazer fusão de shorthands, deduplicação e eliminação de código morto que uma ferramenta baseada em navegador não pode.

Como depuro meu CSS minificado em produção?

Gere um source map durante o passo de build (flag --map no PostCSS, sourceMap: true no lightningcss). O arquivo map liga os offsets de bytes minificados de volta às linhas de fonte originais. As DevTools do navegador recuperam automaticamente o map e mostram o arquivo e número de linha originais quando você inspeciona um elemento estilizado, mesmo que o navegador esteja carregando o arquivo minificado.

A minificação remove meus comentários?

Sim — a minificação CSS padrão remove todos os comentários /* ... */. Se você tem comentários importantes que precisam sobreviver (cabeçalhos de copyright), use a convenção !: /*! Copyright ... */. A maioria dos minificadores preserva comentários começando com !. Para preservar cabeçalhos de licença em produção, use cssnano com { discardComments: { removeAllButFirst: true } }.