Formattatore e abbellitore CSS gratuito

Cos'è la formattazione CSS?

Un formattatore CSS (chiamato anche "beautifier" o "pretty-printer") prende CSS in qualsiasi forma, output di produzione minificato, snippet su una sola riga incollati dall'inspector del browser, fogli di stile scritti a mano con indentazione incoerente, e li riemette con indentazione convenzionale, interruzioni di riga e formattazione coerente di selettori e dichiarazioni. Il parser CSS del browser ignora gli spazi al momento del parsing, quindi la pagina renderizzata appare identica indipendentemente da come è disposto il sorgente. Il punto è puramente la leggibilità umana: la gerarchia indentata rende visibile l'annidamento di @media, una proprietà per riga lascia ai tuoi occhi scansionare velocemente le dichiarazioni di una regola e una formattazione coerente attraverso una codebase rende la revisione dei diff più veloce. I quattro flussi di lavoro reali: (1) debug di CSS minificato di produzione incollato dall'inspector di DevTools per capire perché una regola non corrisponde; (2) riformattare CSS estratto dal pannello "Computed" di un browser per confrontarlo con il sorgente; (3) normalizzare le differenze di formattazione del team dopo un merge da un contributore che usa convenzioni diverse; (4) preparare CSS per la code review quando il sorgente è degradato in compatti one-liner.

I principali formattatori CSS

js-beautify (Einar Lielmanis, dal 2007) è il formattatore di lunga data dell'ecosistema JavaScript, la metà CSS è ciò che alimenta la facciata pubblica di beautifier.io e ha storicamente sostenuto dozzine di siti "formatta CSS online". Prettier (James Long, gennaio 2017; supporto CSS aggiunto in v1.4 il 3 giugno 2017) è il formattatore opinionato che è arrivato a dominare l'ecosistema frontend moderno. La filosofia di design di Prettier è "quasi nessuna configurazione", uno stile di indentazione (2 spazi per default), un target di larghezza riga, wrapping prevedibile. È il formattatore predefinito per CSS in VS Code quando l'estensione Prettier è installata. Stylelint (David Clark + Maxime Thirouin, 2015) è più linter che formattatore ma supporta il format-on-save tramite il flag --fix ed è la scelta de facto per imporre convenzioni CSS attraverso un team, le sue oltre 100 regole built-in coprono di tutto, dal "nessun selettore duplicato" a "preferisci hex a rgb()" a "solo apici singoli". clean-css (Jakub Pawlowicz, 2011) principalmente minifica ma ha una modalità "beautify" che inverte l'operazione. Tutti e quattro alla fine analizzano il CSS attraverso PostCSS (Andrey Sitnik, iniziato il 7 settembre 2013), il parser CSS universale che alimenta la maggior parte dell'ecosistema CSS moderno (Autoprefixer, cssnano, l'elaborazione di Tailwind). Per i progetti moderni nel 2026, Prettier on save è il default; questo strumento in-browser è per i casi una tantum fuori da qualsiasi contesto di progetto.

Indentazione e convenzioni dei selettori

Le convenzioni CSS nel 2026 propendono fortemente per l'indentazione a 2 spazi, il default in Prettier, il sorgente di Tailwind, la Code Guide di Bootstrap, la Google CSS Style Guide e la maggior parte dei pacchetti CSS pubblicati su npm. La vecchia convenzione a 4 spazi persiste in alcune codebase legacy. I tab sono rari nel CSS specificamente (più comuni in JS/TS). Per i selettori: le liste di selettori separate da virgola sono convenzionalmente uno per riga (.btn,<br>.btn-primary,<br>.btn-secondary {), rendendo facile aggiungere o rimuovere un selettore senza riallineare la riga. I combinatori (>, +, ~) hanno tipicamente uno spazio su ogni lato. Le catene di pseudo-classi (:hover:focus) restano strette. Selettori universali (*) e combinatori discendenti (lo spazio implicito) sono neutri rispetto al formattatore.

Formattazione delle dichiarazioni

Una dichiarazione per riga è il default moderno, color: red; sulla propria riga, padding: 10px; sulla successiva. L'alternativa "compatta" (più dichiarazioni su una riga) è rara nel CSS di produzione oggi; la maggior parte dei team è passata a una per riga per leggibilità e diff puliti. Singolo spazio dopo i due punti: color: red; non color:red;. Punto e virgola finale sull'ultima dichiarazione: tecnicamente opzionale nella spec CSS, ma ogni formattatore moderno lo include per amichevolezza dei diff, aggiungere una nuova proprietà non richiede di modificare la riga precedente. Riga vuota tra le regole: opzionale e dipendente dal team. Prettier preserva le righe vuote dall'input invece di imporre uno stile specifico. Quoting delle proprietà: i nomi di font con spazi richiedono apici (font-family: "Helvetica Neue", sans-serif;); gli URL sono convenzionalmente tra apici (url("image.png")) anche se senza apici è valido. Normalizzazione dei valori: keyword in minuscolo (RED → red), hex abbreviato (#FFFFFF → #fff), eliminazione delle unità zero (0px → 0), la maggior parte di queste appartiene a un minificatore piuttosto che a un formattatore, ma alcuni formattatori applicano quelle senza perdita di informazione.

Casi speciali del CSS

Le query @media annidano le loro regole con un livello di indentazione extra, rendendo la struttura condizionale visivamente ovvia. I blocchi @keyframes contengono regole percentuali (0% { ... }, 100% { ... }) che si annidano allo stesso modo. Le dichiarazioni @font-face hanno diverse coppie src/format che beneficiano di essere una per riga. Le proprietà personalizzate CSS (--brand-color: #3b82f6;) sono formattate come qualsiasi altra dichiarazione, ma il nome della proprietà preserva il caso (i nomi delle proprietà personalizzate sono case-sensitive, a differenza delle proprietà standard). Le espressioni calc() richiedono spazi attorno agli operatori, calc(100% - 20px) è corretto, calc(100%-20px) è CSS non valido. I formattatori preservano lo spazio necessario dentro calc() normalizzando il contesto circostante. CSS Nesting (CSS Nesting Module Level 1, baseline 2023+), una funzionalità relativamente nuova che permette alle regole annidate di indentarsi sotto il loro genitore, ha cambiato il modo in cui i formattatori gestiscono la sintassi annidata; Prettier moderno e Stylelint capiscono entrambi la sintassi nativa.

Ordinamento delle proprietà, una convenzione sorprendentemente contesa

Alcuni team impongono l'ordinamento delle proprietà dentro ogni regola. Tre convenzioni competono. Alfabetica (l'interruttore "Sort properties" di questo strumento): la più semplice, facile da imporre meccanicamente, rende "la proprietà X è già dichiarata qui?" una scansione veloce. La Google CSS Style Guide raccomanda alfabetica con concessioni per i prefissi vendor. Per concetto (posizionamento → box model → tipografia → visivo → animazione): raggruppa le proprietà correlate. Il libro sull'architettura SMACSS ha popolarizzato questo approccio. Per tipo (display per primo, poi box model, poi text, poi misc): una variante di "per concetto" con raggruppamenti più rigidi. La regola order/properties-order di Stylelint supporta una qualsiasi di queste tramite configurazione. Nessuna delle tre migliora il rendering; la scelta è puramente su quale modello mentale trovi più facile quando scansiona una regola. Questo strumento offre l'ordinamento alfabetico come opzione opt-in; per le altre convenzioni avresti bisogno di un file di configurazione Stylelint in un progetto reale.

La moderna pipeline CSS

Per progetti con una pipeline di build, il default 2026 è Prettier in esecuzione on-save nel tuo editor e Stylelint a ogni commit tramite Husky + lint-staged. VS Code spedisce Prettier come formattatore predefinito per file CSS, SCSS, LESS quando l'estensione è installata. I pre-commit hook tramite Husky eseguono Stylelint e Prettier sui file in stage prima di permettere il commit. I controlli CI eseguono stylelint --check e prettier --check sulle pull request. Dopo la formattazione in sviluppo, il CSS di produzione passa attraverso cssnano (basato su PostCSS, lo standard moderno di minificazione) che inverte tutto ciò che il formattatore ha fatto per produrre byte compressi da spedire. Niente di tutto questo conta per snippet una tantum incollati da altrove, è esattamente per questo che esiste questo strumento in-browser. Per il lavoro a lungo termine sul progetto, configura Prettier + Stylelint localmente; lo strumento in-browser è l'opzione senza attriti per tutto il resto.

Casi d'uso comuni

• Revisione del codice · rendi il tuo CSS più leggibile prima di condividerlo con il tuo team.
• Debug · un CSS ben formattato facilita la ricerca e la correzione dei problemi di stile.
• Refactoring · capisci meglio la struttura del CSS grazie a un'indentazione e un'organizzazione chiare.
• Pulizia dall'inspector del browser. Il pulsante "Copy rule" in DevTools produce CSS compatto e difficile da leggere; formattalo prima di incollarlo nel tuo foglio di stile.
• Minificazione di produzione. L'interruttore "Minify mode" inverte la formattazione, utile per fare il deploy del CSS in produzione dove ogni byte conta.
• Standardizzazione di team. Allinea le convenzioni di formattazione del team prima di inviare una PR.

Privacy: perché conta il solo browser qui

Il CSS raramente contiene segreti espliciti, ma fogli di stile proprietari rivelano informazioni sulla tassonomia di classi interne di un sito, i token del design system, le ipotesi di test A/B codificate nei nomi dei selettori e le funzionalità non ancora rilasciate. I formattatori lato server caricano il tuo CSS su un servizio di terze parti dove resta nei log. Questo strumento funziona interamente nel tuo browser tramite JavaScript, verifica nel pannello Network di DevTools mentre clicchi Formatta o metti la pagina offline (modalità aereo) dopo il caricamento e il formattatore continua a funzionare. Sicuro per fogli di stile proprietari, file source-of-truth del design system, varianti di test A/B o qualsiasi CSS che non vorresti vedere copiato sul disco rigido di uno sconosciuto.

Domande frequenti

Cos'è l'abbellimento CSS?

L'abbellimento CSS rimette in forma il tuo codice per renderlo più leggibile aggiungendo un'indentazione corretta e ritorni a capo. È l'inverso della minificazione e facilita molto il debug.

Quando usare CSS minificato?

Il CSS minificato rimuove tutti gli spazi e si adatta meglio alla produzione per ridurre la dimensione e la banda. Usa il CSS abbellito in sviluppo per facilitare il debug. Molti strumenti di build minificano automaticamente al deployment.

A cosa serve l'ordinamento alfabetico delle proprietà?

Questa opzione classifica le proprietà CSS in ordine alfabetico in ogni regola (per es. border prima di color prima di display). Alcuni sviluppatori preferiscono questo approccio per scorrere più facilmente, anche se non influisce sul rendering CSS.

Cosa fa "una proprietà per riga"?

Mette ogni dichiarazione sulla propria riga, color: red; su una riga, padding: 10px; sulla successiva, invece di impacchettarle in una singola riga. Il default moderno essenzialmente in tutto il CSS di produzione, perché rende i diff più puliti (aggiungere una proprietà = aggiungere una riga, non modificarne una) e rende ogni dichiarazione più facile da leggere individualmente. L'opposto, più dichiarazioni per riga, è raro nel codice di produzione 2026 al di fuori di snippet di una sola regola molto compatti.

Dovrei usarlo se il mio progetto usa già Prettier o Stylelint?

Probabilmente no, l'integrazione Prettier del tuo editor lo sta facendo on-save, con piena consapevolezza dell'AST CSS tramite PostCSS, e Stylelint impone le convenzioni del team a ogni commit. Questo strumento è per i casi che la tua pipeline di build non copre: CSS incollato da un inspector del browser, snippet da email o Stack Overflow, formattazione una tantum fuori da qualsiasi contesto di progetto. Per il lavoro a lungo termine sul progetto, configura Prettier + Stylelint localmente; per il lavoro una tantum senza attriti, questo strumento è la forma giusta.

I miei file CSS vengono caricati?

No. La formattazione avviene interamente nel tuo browser tramite JavaScript. Il CSS che incolli non attraversa mai la rete, verifica nel pannello Network di DevTools mentre clicchi Formatta o metti la pagina offline (modalità aereo) dopo il caricamento e lo strumento continua a funzionare. Sicuro per fogli di stile proprietari, file source-of-truth del design system, varianti di test A/B o qualsiasi CSS che non vorresti vedere copiato sul disco rigido di uno sconosciuto.

Strumenti correlati