Kostenloser CSS-Formatierer & Verschönerer

Was CSS-Formatierung tatsächlich tut

Ein CSS-Formatierer (auch „Beautifier“ oder „Pretty-Printer“ genannt) nimmt CSS in jeder Form, minifizierte Produktionsausgabe, einzeilige Schnipsel, die aus dem Browser-Inspector eingefügt sind, von Hand geschriebene Stylesheets mit inkonsistenter Einrückung, und gibt es wieder aus mit konventioneller Einrückung, Zeilenumbrüchen und konsistenter Selektor- und Deklarationsformatierung. Der CSS-Parser des Browsers ignoriert Whitespace zur Parse-Zeit, sodass die gerenderte Seite identisch aussieht, egal wie der Quelltext ausgelegt ist. Der Punkt ist rein menschliche Lesbarkeit: eingerückte Hierarchie macht @media-Verschachtelung sichtbar, eine Eigenschaft pro Zeile lässt das Auge die Deklarationen einer Regel schnell überfliegen, und konsistentes Format über eine Codebase hinweg beschleunigt Diff-Reviews. Die vier realen Workflows: (1) minifiziertes Produktions-CSS debuggen, das aus dem DevTools-Inspector eingefügt wurde, um herauszufinden, warum eine Regel nicht greift; (2) CSS, das aus dem „Computed“-Panel eines Browsers extrahiert wurde, neu formatieren, um es mit der Quelle zu vergleichen; (3) Formatierungsunterschiede im Team nach einem Merge von einem Mitwirkenden, der andere Konventionen verwendet, normalisieren; (4) CSS für die Code-Review aufbereiten, wenn die Quelle zu kompakten Einzeilern verkommen ist.

Die wichtigsten CSS-Formatierer

js-beautify (Einar Lielmanis, ab 2007) ist der langjährige Formatierer im JavaScript-Ökosystem, die CSS-Hälfte ist es, die das öffentliche Gesicht von beautifier.io antreibt und historisch Dutzende von „format CSS online“-Sites unterstützt hat. Prettier (James Long, Januar 2017; CSS-Unterstützung in v1.4 am 3. Juni 2017 hinzugefügt) ist der „opinionated“ Formatierer, der das moderne Frontend-Ökosystem dominieren konnte. Prettiers Designphilosophie lautet „fast keine Konfiguration“, ein Einrückstil (2 Leerzeichen standardmäßig), eine Zeilenbreitenvorgabe, vorhersagbares Umbrechen. Es ist der Standard-Formatierer für CSS in VS Code, wenn die Prettier-Erweiterung installiert ist. Stylelint (David Clark + Maxime Thirouin, 2015) ist eher Linter als Formatierer, unterstützt aber Format-on-Save über das --fix-Flag und ist die De-facto-Wahl, um CSS-Konventionen im Team durchzusetzen, seine über 100 eingebauten Regeln decken alles ab, von „keine doppelten Selektoren“ bis „lieber Hex statt rgb()“ bis „nur einfache Anführungszeichen“. clean-css (Jakub Pawlowicz, 2011) minifiziert primär, hat aber einen „Beautify“-Modus, der die Operation umkehrt. Alle vier parsen CSS letztlich durch PostCSS (Andrey Sitnik, gestartet am 7. September 2013), der universelle CSS-Parser, der den Großteil des modernen CSS-Ökosystems antreibt (Autoprefixer, cssnano, Tailwinds Verarbeitung). Für moderne Projekte im Jahr 2026 ist Prettier-beim-Speichern Standard; dieses Werkzeug im Browser ist für Einzelfälle außerhalb jedes Projektkontexts.

Einrückungs- und Selektorkonventionen

CSS-Konventionen im Jahr 2026 tendieren stark zu 2-Leerzeichen-Einrückung, der Standard in Prettier, in Tailwinds Quelle, in Bootstraps Code Guide, im Google CSS Style Guide und in den meisten npm-veröffentlichten CSS-Paketen. Die ältere 4-Leerzeichen-Konvention hält sich in manchen Legacy-Codebasen. Tabs sind speziell in CSS selten (in JS/TS häufiger). Für Selektoren: Komma-getrennte Selektorlisten werden konventionell einer pro Zeile geschrieben (.btn,<br>.btn-primary,<br>.btn-secondary {), was es einfach macht, einen Selektor hinzuzufügen oder zu entfernen, ohne die Zeile neu umfließen zu müssen. Kombinatoren (>, +, ~) haben typischerweise ein Leerzeichen auf jeder Seite. Pseudoklassen-Ketten (:hover:focus) bleiben eng. Universelle Selektoren (*) und Nachfahren-Kombinatoren (das implizite Leerzeichen) sind formatierer-neutral.

Formatierung von Deklarationen

Eine Deklaration pro Zeile ist der moderne Standard, color: red; auf einer eigenen Zeile, padding: 10px; auf der nächsten. Die „kompakte“ Alternative (mehrere Deklarationen auf einer Zeile) ist heute im Produktions-CSS selten; die meisten Teams sind aus Gründen der Lesbarkeit und sauberer Diffs zu eine-pro-Zeile übergegangen. Ein einzelnes Leerzeichen nach dem Doppelpunkt: color: red;, nicht color:red;. Abschließendes Semikolon bei der letzten Deklaration: technisch optional laut CSS-Spezifikation, aber jeder moderne Formatierer fügt es aus Diff-Freundlichkeit hinzu, eine neue Eigenschaft hinzuzufügen erfordert dann nicht das Ändern der Vorzeile. Leerzeile zwischen Regeln: optional und teamabhängig. Prettier behält Leerzeilen aus der Eingabe bei, statt einen bestimmten Stil zu erzwingen. Anführungszeichen bei Eigenschaften: Schriftnamen mit Leerzeichen erfordern Anführungszeichen (font-family: "Helvetica Neue", sans-serif;); URLs werden konventionell in Anführungszeichen geschrieben (url("image.png")), obwohl ohne ebenfalls gültig ist. Wertenormalisierung: Schlüsselwörter kleinschreiben (RED → red), Kurzform-Hex (#FFFFFF → #fff), Null-Einheit-Streichung (0px → 0), das meiste davon gehört eher zu einem Minifier als zu einem Formatierer, aber manche Formatierer wenden die verlustfreien an.

Besondere CSS-Fälle

@media-Queries verschachteln ihre Regeln mit einer zusätzlichen Einrückungsebene, sodass die Bedingungsstruktur visuell offensichtlich ist. @keyframes-Blöcke enthalten Prozentregeln (0% { ... }, 100% { ... }), die sich genauso verschachteln. @font-face-Deklarationen haben mehrere src/format-Paare, die davon profitieren, je eines pro Zeile zu stehen. CSS-Custom-Properties (--brand-color: #3b82f6;) werden wie jede andere Deklaration formatiert, aber der Eigenschaftsname behält die Groß-/Kleinschreibung (Custom-Property-Namen sind im Gegensatz zu Standardeigenschaften case-sensitive). calc()-Ausdrücke erfordern Whitespace um Operatoren, calc(100% - 20px) ist korrekt, calc(100%-20px) ist ungültiges CSS. Formatierer bewahren notwendigen Whitespace innerhalb von calc(), während sie den umgebenden Kontext normalisieren. CSS Nesting (CSS Nesting Module Level 1, Baseline 2023+) (eine relativ neue Funktion, die verschachtelten Regeln erlaubt, sich unter ihrem Elternteil einzurücken) hat verändert, wie Formatierer mit verschachtelter Syntax umgehen; modernes Prettier und Stylelint verstehen beide die native Syntax.

Eigenschaften sortieren, eine überraschend umstrittene Konvention

Manche Teams erzwingen eine Eigenschaftenreihenfolge innerhalb jeder Regel. Drei Konventionen konkurrieren. Alphabetisch (der Schalter „Eigenschaften sortieren“ in diesem Werkzeug): am einfachsten, mechanisch leicht durchzusetzen, macht „ist Eigenschaft X hier schon deklariert?“ zu einem schnellen Blick. Der Google CSS Style Guide empfiehlt alphabetisch mit Zugeständnissen für Vendor-Präfixe. Nach Konzept (Positionierung → Box-Modell → Typografie → Visuell → Animation): gruppiert verwandte Eigenschaften. Das SMACSS-Architekturbuch hat diesen Ansatz populär gemacht. Nach Typ (zuerst display, dann Box-Modell, dann Text, dann sonstiges): eine Variante von „nach Konzept“ mit strikteren Gruppierungen. Stylelints order/properties-order-Regel unterstützt jede davon per Konfiguration. Keine der drei verbessert das Rendering; die Wahl hängt rein davon ab, welches mentale Modell Sie beim Überfliegen einer Regel leichter finden. Dieses Werkzeug bietet alphabetisches Sortieren als Opt-in-Schalter; für die anderen Konventionen bräuchten Sie eine Stylelint-Konfigurationsdatei in einem echten Projekt.

Die moderne CSS-Pipeline

Für Projekte mit Build-Pipeline ist 2026 Standard, dass Prettier beim Speichern in Ihrem Editor läuft und Stylelint bei jedem Commit über Husky + lint-staged. VS Code liefert Prettier als Standard-Formatierer für CSS-, SCSS- und LESS-Dateien aus, wenn die Erweiterung installiert ist. Pre-Commit-Hooks über Husky lassen Stylelint und Prettier auf gestagte Dateien laufen, bevor der Commit erlaubt wird. CI-Checks führen stylelint --check und prettier --check auf Pull Requests aus. Nach dem Formatieren in der Entwicklung läuft Produktions-CSS durch cssnano (PostCSS-basiert, der moderne Minifizierungs-Standard), das alles, was der Formatierer getan hat, umkehrt, um komprimierte Bytes für die Auslieferung zu erzeugen. Nichts davon zählt für einmalige Schnipsel, die anderswo eingefügt wurden, genau dafür ist dieses Werkzeug im Browser da. Für langfristige Projektarbeit richten Sie Prettier + Stylelint lokal ein; das Browser-Werkzeug ist die reibungsfreie Option für alles andere.

Übliche Anwendungsfälle

• Code-Review. Minifiziertes oder kompaktes CSS lesbar machen, bevor Sie es einer Kollegin zeigen.
• Debugging. Sauber formatiertes CSS macht sofort sichtbar, welche Selektoren greifen und welche Deklarationen überschrieben werden.
• Refactoring. Die Struktur eines Stylesheets, das Sie nicht geschrieben haben, ist mit konsistentem Format viel leichter zu verstehen.
• Aufräumen aus dem Browser-Inspector. Der „Regel kopieren“-Button in den DevTools erzeugt kompaktes, schwer lesbares CSS; formatieren Sie es, bevor Sie es in Ihr Stylesheet einfügen.
• Produktions-Minifizierung. Der „Minify-Modus“-Schalter kehrt die Formatierung um, nützlich, um CSS in die Produktion auszuliefern, wo jedes Byte zählt.
• Team-Standardisierung. Formatkonventionen des Teams angleichen, bevor Sie eine PR einreichen.

Privatsphäre: Warum „nur im Browser“ hier zählt

CSS enthält selten ausdrückliche Geheimnisse, aber proprietäre Stylesheets verraten Informationen über die interne Klassen-Taxonomie einer Site, Design-System-Tokens, in Selektornamen kodierte A/B-Test-Hypothesen und nicht ausgelieferte Funktionen. Serverseitige Formatierer laden Ihr CSS zu einem Drittanbieter-Dienst hoch, wo es in Logs sitzt. Dieses Werkzeug läuft vollständig in Ihrem Browser via JavaScript, überprüfen Sie es im Netzwerk-Tab der DevTools, während Sie auf Format klicken, oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und der Formatierer funktioniert weiter. Sicher für proprietäre Stylesheets, Source-of-Truth-Dateien eines Design-Systems, A/B-Test-Varianten oder jedes CSS, das Sie nicht auf der Festplatte eines Fremden sehen möchten.

Häufig gestellte Fragen

Was ist CSS-Beautifizierung?

Beautifizierung (auch „Formatierung“ oder „Pretty-Printing“) formatiert CSS-Quelltext neu, damit er besser lesbar wird, fügt korrekte Einrückung, Zeilenumbrüche zwischen Regeln, Deklarationen je eine pro Zeile und konsistenten Abstand um Doppelpunkte ein. Die vom Browser gerenderte Ausgabe ist identisch, weil der CSS-Parser Whitespace zur Parse-Zeit ignoriert. Ziel ist die menschliche Lesbarkeit für Code-Review, Debugging und Bearbeiten, keine Veränderung am Aussehen der Seite.

Wann sollte ich minifiziertes CSS verwenden?

Minifiziertes CSS entfernt allen unnötigen Whitespace und ist die richtige Wahl für die Produktionsbereitstellung, es reduziert die Dateigröße um 20–40 % vor der Brotli-Kompression am CDN-Edge, und jedes Byte weniger im kritischen Renderpfad zählt für die Core Web Vitals (insbesondere LCP). Beautifiziertes CSS ist für Entwicklung, Code-Review und Debugging. Moderne Build-Pipelines (Vite, webpack, Parcel, Astro, Next.js) minifizieren bei Produktions-Builds automatisch via cssnano oder Lightning CSS, also schreiben Sie für Projektarbeit typischerweise beautifiziertes CSS, und Ihr Bundler gibt die minifizierte Version aus.

Was tut „Eigenschaften alphabetisch sortieren“?

Es sortiert Deklarationen innerhalb jeder Regel alphabetisch, border vor color vor display vor margin. Manche Teams erzwingen die alphabetische Reihenfolge, weil sie „ist X hier schon deklariert?“ zu einem schnellen Blick macht und Diskussionen um doppelte Eigenschaften in der Code-Review vermeidet. Der Google CSS Style Guide empfiehlt alphabetisch (mit Zugeständnissen für Vendor-Präfixe). Andere Teams bevorzugen eine „nach Konzept“-Reihenfolge (Positionierung → Box-Modell → Typografie → Visuell → Animation, popularisiert von SMACSS). Keine der Reihenfolgen wirkt sich auf das Rendering aus, reine kosmetische / Team-Konventionsentscheidung.

Was tut „eine Eigenschaft pro Zeile“?

Es setzt jede Deklaration auf eine eigene Zeile, color: red; in einer Zeile, padding: 10px; in der nächsten, statt sie auf eine einzige Zeile zu packen. Der moderne Standard in praktisch jedem Produktions-CSS, weil er Diffs sauberer macht (eine Eigenschaft hinzufügen = eine Zeile hinzufügen, keine ändern) und jede Deklaration einzeln leichter lesbar macht. Das Gegenteil (mehrere Deklarationen pro Zeile) ist im Produktionscode 2026 außerhalb sehr kompakter Einzelregel-Schnipsel selten.

Sollte ich es nutzen, wenn mein Projekt bereits Prettier oder Stylelint verwendet?

Wahrscheinlich nicht, die Prettier-Integration in Ihrem Editor erledigt das beim Speichern, mit voller CSS-AST-Kenntnis über PostCSS, und Stylelint setzt Team-Konventionen bei jedem Commit durch. Dieses Werkzeug ist für die Fälle, die Ihre Build-Pipeline nicht abdeckt: CSS, das aus dem Browser-Inspector eingefügt wurde, Schnipsel aus E-Mails oder Stack Overflow, einmaliges Formatieren außerhalb jedes Projektkontexts. Für langfristige Projektarbeit richten Sie Prettier + Stylelint lokal ein; für reibungsfreie Einzelfälle ist dieses Werkzeug die richtige Form.

Werden meine CSS-Dateien hochgeladen?

Nein. Die Formatierung läuft vollständig in Ihrem Browser via JavaScript. Das CSS, das Sie einfügen, überquert nie das Netzwerk, überprüfen Sie es im Netzwerk-Tab der DevTools, während Sie auf Format klicken, oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und das Werkzeug funktioniert weiter. Sicher für proprietäre Stylesheets, Source-of-Truth-Dateien eines Design-Systems, A/B-Test-Varianten oder jedes CSS, das Sie nicht auf der Festplatte eines Fremden sehen möchten.

Verwandte Tools