CSS formatieren
Unleserliches oder minifiziertes CSS, SCSS und LESS sauber formatieren – mit Prettier, wählbarer Einrückung und Anführungszeichen.
Der CSS-Formatierer macht minifiziertes oder unordentliches CSS wieder lesbar: eine Deklaration pro Zeile, einheitliche Einrückung, Leerzeichen und Zeilenumbrüche nach festen Regeln. Er nutzt Prettier und versteht neben CSS auch SCSS und LESS. Einrückung und Anführungszeichen sind einstellbar, alles läuft lokal im Browser.
Formatiert
Warum CSS formatieren?
Minifiziertes CSS aus fremden Websites, Themes oder alten Projekten ist kaum lesbar. Ein Formatierer bringt Struktur hinein, ohne die Wirkung zu verändern. Im Team sorgt einheitliche Formatierung außerdem für kleinere, leichter prüfbare Diffs.
| Regel | Ergebnis |
|---|---|
| Eine Deklaration pro Zeile | Änderungen sind zeilengenau sichtbar |
| Einheitliche Einrückung | Verschachtelung auf einen Blick |
| Leerzeile zwischen Regeln | Blöcke klar getrennt |
Führende Null (0.5) | Werte eindeutig lesbar |
Den umgekehrten Weg geht CSS minifizieren, Fehler findet der CSS-Validator.
Häufige Fragen
Welcher Formatierer steckt dahinter?
Prettier, der verbreitetste Code-Formatierer im Web-Umfeld. Das Ergebnis entspricht dem, was Prettier in einem Projekt mit denselben Einstellungen erzeugen würde.
Ändert die Formatierung die Wirkung des CSS?
Nein. Vereinheitlicht werden nur Leerzeichen, Zeilenumbrüche, Anführungszeichen und Schreibweisen wie die Kleinschreibung von HEX-Farben. Selektoren und Werte behalten ihre Bedeutung.
Was passiert bei Syntaxfehlern?
Prettier bricht ab und meldet die Fundstelle mit Zeile und Spalte. Fehlende Klammern oder Semikolons findest du so schnell. Für inhaltliche Fehler wie unbekannte Eigenschaften nutzt du den CSS-Validator.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.