Como funciona o embelecimento CSS
O embelezador lê a sua folha de estilos carácter a carácter, regista o nível de aninhamento de cada bloco e re-emite-o com espaçamento consistente. Nunca altera o que os estilos fazem — apenas a forma como aparecem no ficheiro.
- Tokenizar. A biblioteca analisa a sua entrada numa sequência de tokens: seletores, nomes de propriedade, valores, at-rules, comentários e as chaves, dois pontos e ponto e vírgula que os separam. As strings e os valores url() são reconhecidos como unidades individuais, pelo que uma chave dentro de uma propriedade content nunca é confundida com um delimitador de bloco.
- Acompanhar o aninhamento. À medida que percorre a sequência de tokens, o embelezador mantém um nível de recuo corrente. Qualquer chave de abertura empurra o nível para mais fundo, seja de um bloco de regra, uma media query ou um bloco de keyframes, e cada chave de fecho retira-o. Essa profundidade decide quantas unidades de recuo precedem cada linha devolvida.
- Aplicar as suas opções. A sua escolha de recuo (2 espaços, 4 espaços ou uma tabulação) define a largura de um nível. A definição do estilo de chaves decide se uma chave de abertura se mantém junto ao seletor que a precede ou cai para a sua própria linha. Os restantes interruptores adicionam uma linha em branco entre blocos de regras e dividem os seletores agrupados em linhas separadas.
- Re-emitir. Por fim, o formatador imprime os tokens com o recuo e as quebras de linha calculados, colocando uma declaração por linha e um espaço após cada dois pontos. O resultado é a mesma folha de estilos, disposta de forma que um ser humano possa percorrer a cascata.
Por que embelezar CSS
- Ler folhas de estilos minificadas. O CSS de produção é enviado numa linha sem espaçamento entre regras. Embelezar restaura as quebras de linha e o recuo para que possa encontrar o seletor por detrás de um erro de layout e ver exatamente que declarações define, mesmo sem uma source map.
- Organizar ficheiros inconsistentes. Uma folha de estilos que várias pessoas tocaram deriva para recuos e estilos de chaves misturados. Uma passagem pelo embelezador normaliza o ficheiro inteiro para um único layout, o que faz com que o próximo diff mostre mudanças reais na cascata em vez de ruído de espaços em branco.
- Esta ferramenta não prejudica a sua página. A maioria dos formatadores online carrega a sua biblioteca completa no momento em que abre a página. Este carrega js-beautify de forma lazy apenas quando clica em Embelezar ou ativa o Modo ao vivo, por isso abrir a página custa alguns kilobytes em vez de algumas centenas, e a renderização inicial mantém-se rápida.
- Nada sai do seu navegador. O embelezador corre completamente no seu dispositivo. O seu CSS nunca é carregado para um servidor, o que importa quando a folha de estilos que está a inspecionar pertence a um cliente, contém nomes de classes internos ou está sujeita a um acordo de confidencialidade.
Aplicações comuns
Embelezar CSS surge sempre que alguém precisa de ler uma folha de estilos que não foi escrita para ser lida.
- Depuração em produção: cole uma folha de estilos minificada retirada da aba Rede para encontrar a regra que está a substituir o layout que esperava.
- Preparação de revisão de código: reformate a folha de estilos com recuo inconsistente de um colaborador antes de abrir o pull request para que os revisores vejam mudanças na cascata, não desordem de layout.
- Aprendizagem e auditoria: expanda a folha de estilos de um framework ou biblioteca de componentes para estudar como os seus seletores, media queries e propriedades personalizadas estão estruturados.
Um exemplo prático
Pegue num one-liner minificado: a{color:red;margin:0}b{padding:0}. Cole-o acima com recuo de 2 espaços e estilo de chaves Colapsar, depois clique em Embelezar. Obtém de volta blocos legíveis: a { na sua própria linha, as declarações color: red; e margin: 0; cada uma com um nível de recuo a mais, a chave de fecho alinhada por baixo do seletor, e a regra b a seguir. Mude o estilo de chaves para Expandir e cada chave de abertura cai para a sua própria linha. Mude o recuo para Tabulações e cada nível muda de dois espaços para um carácter de tabulação. Os estilos são idênticos; apenas o layout muda.
FAQ
Isto corre no meu navegador?
Sim. A biblioteca js-beautify é carregada de forma lazy na primeira vez que clica em Embelezar ou ativa o Modo ao vivo, depois fica em cache. O seu CSS nunca sai da página — não há chamada ao servidor nem upload.
Embelezar é o mesmo que desminificar?
Restaura a formatação legível — recuo, quebras de linha e espaçamento — mas não consegue recuperar os comentários que a minificação removeu nem recuperar qualquer estrutura que nunca esteve no ficheiro. Apenas reformata as declarações e seletores presentes.
Embelezar vai mudar como os meus estilos são renderizados?
Não. O embelecimento apenas adiciona e remove espaços em branco e quebras de linha; a cascata não é tocada e a página renderiza de forma idêntica. A ordem das propriedades, a especificidade e os valores mantêm-se exatamente como os escreveu.
O que significam as opções de estilo de chaves?
Colapsar mantém uma chave de abertura na mesma linha que o seletor (a {), que é a convenção CSS habitual. Expandir coloca cada chave de abertura na sua própria linha por baixo do seletor. Os interruptores de linha em branco e um seletor por linha controlam o espaçamento entre regras e como os seletores agrupados como h1, h2, h3 ficam distribuídos.
O embelecimento CSS no lado do navegador dá-lhe uma folha de estilos legível sem um passo de compilação nem um upload. Cole um ficheiro minificado ou desorganizado, escolha o seu recuo e estilo de chaves, depois copie ou faça download do resultado. Nada sai do seu dispositivo, não há conta e a biblioteca só carrega quando a pede — por isso abrir esta página custa-lhe alguns kilobytes, não um megabyte.