Formattatore CSS

Cosa fa un formattatore CSS

Un formattatore CSS prende un foglio di stile e ne riscrive l’impaginazione senza cambiarne il significato. Ogni regola ha il suo blocco, ogni dichiarazione la sua riga, e i blocchi annidati come le media query vengono indentati di un livello in più. Il risultato è lo stesso CSS, solo più facile da leggere, revisionare e modificare.

Ti serve quando copi stili da un file minificato, apri un tema scritto a mano e ritoccato per anni, oppure incolli CSS dagli strumenti per sviluppatori del browser. È utile anche prima di una code review: con una formattazione uniforme il diff mostra solo le modifiche reali.

Come usare questo formattatore CSS

1. Incolla il CSS nel riquadro a sinistra. Viene formattato appena lo incolli.
2. In alternativa premi Apri file per caricare un file .css dal tuo dispositivo, oppure Esempio per provare con del codice di esempio.
3. Scegli il Rientro che preferisci: 2 spazi, 4 spazi o tabulazioni.
4. Imposta la Larghezza riga. Elenchi di selettori e valori lunghi vanno a capo quando superano questa larghezza.
5. Attiva Virgolette singole se il tuo progetto preferisce 'Inter' a "Inter".
6. Premi Formatta (o Ctrl+Invio) per formattare, oppure Minifica per comprimere.
7. Premi Copia o Scarica per prendere il risultato.

Dopo la prima formattazione, il risultato si aggiorna mentre scrivi. Se il CSS contiene un errore di sintassi, il messaggio sotto i riquadri indica dove si trova e Mostra nell’input ti porta direttamente a quel punto.

Prima e dopo

Ecco un blocco di CSS minificato:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Dopo Formatta con 2 spazi:

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

Nota che il combinatore figlio > riceve uno spazio su ciascun lato, ogni selettore dell’elenco sta su una riga propria e la regola dentro la media query è indentata. I commenti restano dove li hai scritti.

Minificare il CSS

Minifica fa il percorso inverso: rimuove i commenti e gli spazi che ai browser non servono. Applicato al codice formattato qui sopra, restituisce di nuovo una sola riga:

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

Il minificatore è prudente di proposito. Mantiene lo spazio in div :first-child, perché toglierlo cambierebbe il selettore. Mantiene gli spazi dentro calc(100% - 2rem), perché calc ne ha bisogno. Non tocca stringhe e valori url(). I commenti che iniziano con /*! vengono conservati, perché di solito contengono una licenza:

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

Non unisce regole duplicate, non accorcia i colori e non elimina i selettori inutilizzati. Per quel livello di ottimizzazione usa nel progetto uno strumento di build come cssnano o Lightning CSS.

Leggere i messaggi di errore

Il formattatore ha bisogno di CSS valido per funzionare. Se manca una parentesi graffa, ricevi un messaggio come questo:

Riga 1, colonna 1: Unclosed block

La posizione indica il blocco aperto e mai chiuso (“Unclosed block” significa proprio blocco non chiuso). Le cause più comuni sono una } mancante alla fine di una regola, una { di troppo dopo un selettore oppure un commento non chiuso. Correggi il problema e premi di nuovo Formatta.

Lo strumento non controlla se i nomi delle proprietà o i valori esistono davvero. colr: red è sintassi valida, quindi viene formattato e non segnalato. Un linter come Stylelint individua questo tipo di errore.

Consigli

• Usa 2 spazi, a meno che il tuo progetto non usi già altro. È la scelta più diffusa nelle guide di stile per il CSS.
• Tieni il file minificato come risultato della build e quello formattato come sorgente. Modificare a mano il CSS minificato porta facilmente a errori.
• Se il CSS sta dentro un file HTML in un tag style, incolla l’intera pagina nel formattatore HTML: formatta anche il CSS incorporato.
• I file Sass con annidamento e $variabili vanno nel formattatore SCSS.

Altri modi per formattare il CSS

• VS Code: apri il file ed esegui Format Document (Maiusc+Alt+F su Windows, Maiusc+Opzione+F su macOS). Installa l’estensione Prettier per ottenere lo stesso risultato di questa pagina.
• Riga di comando: npx prettier --write styles.css formatta un file e lo sovrascrive con Prettier.
• Strumenti per sviluppatori del browser: il pannello Sources di Chrome e Firefox ha un pulsante di pretty print per i fogli di stile minificati. Va bene per leggere, ma non ti permette di scegliere impostazioni come la larghezza del rientro.

Questa pagina è comoda quando non vuoi installare nulla o quando devi controllare al volo del codice preso altrove. Se lavori anche con gli script, il formattatore JavaScript usa lo stesso motore e le stesse opzioni.