CSS Formatter & Beautifier

Was macht ein CSS Formatter?

Ein CSS Formatter nimmt Stylesheet-Code in beliebiger Form – auf eine Zeile minifiziert, unregelmäßig eingerückt oder aus den DevTools des Browsers kopiert – und schreibt ihn mit einem festen Layout neu: der Selektor, eine öffnende Klammer, pro Deklaration eine Zeile property: value; und die schließende Klammer in einer eigenen Zeile. Regeln innerhalb von @media-, @supports- und @container-Blöcken werden zusätzlich eingerückt, damit die Struktur auf einen Blick erkennbar ist.

Das Formatieren ist der erste Schritt, wenn du ein fremdes Theme debuggen, CSS in einem Pull Request prüfen oder von den Styles einer anderen Seite lernen möchtest. Der Formatter basiert auf js-beautify und läuft komplett in deinem Browser.

Vorher und nachher

.btn,.btn-primary{display:inline-flex;padding:.625rem 1rem;color:#fff}@media (max-width:640px){.btn{width:100%}}

wird zu

.btn,
.btn-primary {
  display: inline-flex;
  padding: .625rem 1rem;
  color: #fff
}

@media (max-width:640px) {
  .btn {
    width: 100%
  }
}

Der Formatter fügt keine Semikolons hinzu, entfernt keine, sortiert keine Eigenschaften um und ändert keine Werte. Er verändert nur Leerraum und Zeilenumbrüche, deshalb verhält sich das Ergebnis genau wie die Eingabe.

SCSS, Less und modernes CSS

Verschachtelte Regeln, &-Elternselektoren, Variablen ($brand, @brand), Mixins und natives CSS-Nesting werden korrekt eingerückt. Custom Properties (--brand: #4f46e5), clamp(), :is()/:where() und Cascade Layers (@layer) bleiben unverändert.

Stilkonventionen, die sich lohnen

• Zwei Leerzeichen als Einrückung sind in den meisten CSS-Styleguides der De-facto-Standard und der Standard von Prettier.
• Ein Selektor pro Zeile bei gruppierten Selektoren macht Diffs kleiner, wenn du einen Selektor hinzufügst oder entfernst.
• Eine Leerzeile zwischen Regeln verbessert die Übersicht in langen Dateien.
• Lass das Formatieren automatisch laufen: Richte Prettier oder Stylelint in deinem Editor und in der CI ein, dann taucht Formatierung nie im Code Review auf.

Bereit für die Produktion? Nutze den CSS Minifier, um genau zu sehen, wie viele Bytes du sparst, oder aktiviere oben Minifizieren. Um dabei gleich Pixelwerte umzurechnen, probier den PX-zu-REM-Converter.

Auch gesucht als: css formatieren, css beautifier, css prettifier, css online formatieren, css minifizieren, css entpacken, scss formatter, less formatter.

Passende Tools zu: CSS Formatter

• HTML Formatter — Füg minifiziertes oder unübersichtliches Markup ein und erhalte sauber und einheitlich eingerücktes HTML – inklusive eingebetteter <style>- und <script>-Blöcke.
• JavaScript Formatierer — Entpacke und formatiere JavaScript, JSON oder JSX mit deiner bevorzugten Einrückung und deinem Klammerstil – oder entferne Leerzeichen und Kommentare mit einem geprüften Minifier.
• Klemmenrechner — Gib eine Mindest- und Höchstgröße sowie den Ansichtsbereich ein – du erhältst einen zoomfreundlichen clamp() Wert mit einer Erklärung der Berechnung, einer Live-Vorschau und einer vollständigen Skalierung für flüssige Schriftgrößen oder Abstände.
• Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.