Formatador CSS

O Que É a Formatação de CSS?

A formatação de CSS é o processo de adicionar indentação consistente, quebras de linha e espaçamento a folhas de estilo em cascata para que o código seja legível por humanos. Os navegadores ignoram completamente os espaços em branco no CSS. Uma única linha minificada e uma folha de estilo bem indentada produzem renderização idêntica. A diferença está na legibilidade: CSS formatado permite escanear seletores, identificar ponto e vírgula ausentes e entender a cascata de relance.

Um formatador CSS (às vezes chamado de embelezador CSS ou pretty-printer) pega CSS comprimido ou com estilo inconsistente e o reescreve com indentação uniforme, uma declaração por linha e posicionamento consistente de chaves. Esta é a operação inversa da minificação, também chamada de embelezamento ou pretty-printing. Enquanto a minificação remove espaços em branco para reduzir o tamanho do arquivo em produção, a formatação restaura a estrutura para desenvolvimento, revisão de código e manutenção da base de código.

A especificação CSS (W3C CSS Syntax Module Level 3) define a gramática para folhas de estilo, mas não diz nada sobre convenções de espaço em branco. As regras de formatação são uma decisão da equipe: tabs vs. espaços, indentação de 2 ou 4 espaços, estilo de chaves, linhas em branco entre conjuntos de regras. Um formatador aplica a convenção escolhida de forma consistente em todos os arquivos. A maioria das equipes codifica sua escolha em um arquivo .prettierrc ou .editorconfig.

Por Que Usar Este Formatador CSS?

Cole qualquer CSS e obtenha saída devidamente indentada em milissegundos. Sem plugins de editor para instalar, sem arquivos de configuração para escrever, sem contas para criar.

Casos de Uso do Formatador CSS

Referência de Ordenação de Propriedades CSS

A maioria dos formatadores CSS não reordena propriedades. Mas muitos guias de estilo recomendam agrupar propriedades relacionadas. A tabela abaixo mostra uma convenção de agrupamento comum usada por ferramentas como o plugin de ordem do Stylelint e o CSScomb:

Este agrupamento é uma convenção, não um requisito do CSS. Os navegadores aplicam declarações com base na especificidade e na ordem de origem, independentemente da posição da propriedade dentro de um bloco de regra. Um formatador foca em espaços em branco e indentação; a reordenação de propriedades é uma preocupação separada de linting tratada por ferramentas como o Stylelint.

Formatação de CSS vs. Minificação de CSS

Formatação e minificação são operações inversas, aplicadas em diferentes estágios do desenvolvimento:

Exemplos de Código

Como formatar CSS programaticamente em diferentes linguagens e ambientes:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

Perguntas Frequentes