Formattatore CSS

Cos'è la Formattazione CSS?

La formattazione CSS è il processo di aggiunta di un'indentazione coerente, interruzioni di riga e spaziatura ai fogli di stile a cascata, in modo che il codice sia leggibile dagli esseri umani. I browser ignorano completamente gli spazi bianchi nel CSS. Un one-liner minificato e un foglio di stile correttamente indentato producono un rendering identico. La differenza è la leggibilità: un CSS formattato ti permette di scorrere i selettori, individuare i punti e virgola mancanti e comprendere la cascata a colpo d'occhio.

Un formattatore CSS (talvolta chiamato abbellitore CSS o pretty-printer) prende un CSS compresso o stilisticamente non uniforme e lo riscrive con indentazione uniforme, una dichiarazione per riga e posizionamento coerente delle parentesi graffe. Questa è l'operazione inversa della minificazione, chiamata anche abbellimento o pretty-printing. Mentre la minificazione rimuove gli spazi bianchi per ridurre le dimensioni del file in produzione, la formattazione ripristina la struttura per lo sviluppo, la revisione del codice e la manutenzione del codebase.

La specifica CSS (W3C CSS Syntax Module Level 3) definisce la grammatica per i fogli di stile, ma non dice nulla sulle convenzioni per gli spazi bianchi. Le regole di formattazione sono una decisione del team: tab vs. spazi, indentazione a 2 o 4 spazi, stile delle parentesi, righe vuote tra i set di regole. Un formattatore impone qualunque convenzione tu scelga, in modo coerente su ogni file. La maggior parte dei team codifica la propria scelta in un file .prettierrc o .editorconfig.

Perché Usare Questo Formattatore CSS?

Incolla qualsiasi CSS e ottieni un output correttamente indentato in pochi millisecondi. Nessun plugin da installare, nessun file di configurazione da scrivere, nessun account da creare.

Casi d'Uso del Formattatore CSS

Riferimento all'Ordinamento delle Proprietà CSS

La maggior parte dei formattatori CSS non riordina le proprietà. Tuttavia, molte guide di stile raccomandano di raggruppare le proprietà correlate. La tabella seguente mostra una convenzione di raggruppamento comune usata da strumenti come il plugin order di Stylelint e CSScomb:

Questo raggruppamento è una convenzione, non un requisito CSS. I browser applicano le dichiarazioni in base alla specificità e all'ordine delle sorgenti, indipendentemente dalla posizione della proprietà all'interno di un blocco di regole. Un formattatore si concentra sugli spazi bianchi e sull'indentazione; il riordinamento delle proprietà è una questione separata di linting gestita da strumenti come Stylelint.

Formattazione CSS vs. Minificazione CSS

Formattazione e minificazione sono operazioni inverse, applicate in fasi diverse dello sviluppo:

Esempi di Codice

Come formattare il CSS a livello di codice in diversi linguaggi e ambienti:

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;
//   }

Domande Frequenti