Free · Fast · Privacy-first

CSS-Whitespace-Formatierer

CSS-Code, der mit inkonsistenten Abstaenden um Doppelpunkte, Selektoren und geschweifte Klammern geschrieben wurde, ist schwer zu scannen, selbst wenn die Einrueckung selbst korrekt ist.

⚡

Normalisiert Abstaende um Doppelpunkte und Semikolons

🔒

Setzt konsistenten Whitespace um geschweifte Klammern

✨

Bereinigt mehrfache Leerzeilen und ueberfluessiges Padding

⚡

Behaelt funktionalen Whitespace in Werten bei

Kosten: Kostenlos für immer
Registrierung: Nicht erforderlich
Verarbeitung: In Ihrem Browser
Datenschutz: Dateien bleiben lokal

KostenlosKeine AnmeldungWhite-Label

Fügen Sie CSS Formatter auf Ihrer Website ein

Binden Sie CSS Formatter mit einer einzigen HTML-Zeile auf jeder Seite ein — Blogpost, Produktdoku, Intranet, Schulportal. Ihre Besucher erhalten das vollständige Tool, vollständig im Browser verarbeitet. Kein Backend, keine Uploads, keine Anmeldung.

Dateien bleiben zu 100 % im Browser des Besuchers
Responsiv — passt sich jeder Containerbreite an
Für immer kostenlos, kein API-Schlüssel nötig

Einbettungscode

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1&lang=de"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/css-formatter?embed=1&lang=de"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="CSS Formatter by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attributionsfreundlich: ein kleiner "Powered by FixTools"-Link erscheint in der Embed-Fußzeile.

Wie Whitespace-Konsistenz die Lesbarkeit von CSS verbessert

Whitespace in CSS dient mehreren Zwecken. Einrueckung kommuniziert Verschachtelungs-Tiefe, Zeilenumbrueche separieren Regeln, Abstaende um Doppelpunkte trennen Eigenschaftsnamen von Werten, und Abstaende um Klammern definieren die Grenzen eines Regelblocks. Wenn diese Whitespace-Konventionen inkonsistent angewendet werden, leidet die Lesbarkeit subtil, aber kumulativ. Eine einzelne Datei mit gemischtem Whitespace mag ertraeglich sein, aber ein Projekt mit hunderten Dateien, jede mit ihren eigenen Konventionen, wird kognitiv anstrengend zu navigieren. Der Whitespace-Formatierer adressiert dies, indem er jede dieser Konventionen auf eine einzige Standardform normalisiert.

Die spezifischen Whitespace-Regeln, die der Formatierer anwendet, folgen weit verbreiteten Branchenkonventionen. Doppelpunkte zwischen Eigenschaftsnamen und Werten haben kein vorausgehendes Leerzeichen, aber ein folgendes Leerzeichen, sodass die Deklaration als color: red statt als color :red oder color:red erscheint. Semikolons folgen ohne Vorraum-Leerzeichen, sodass die Deklaration mit color: red; endet statt mit color: red ;. Oeffnende geschweifte Klammern haben ein vorausgehendes Leerzeichen und folgen dem Selektor auf derselben Zeile, sodass die Regel mit .button { beginnt statt mit .button{. Schliessende geschweifte Klammern stehen auf eigenen Zeilen ohne fuehrenden Whitespace ueber die Einrueckungs-Tiefe hinaus.

Whitespace-Normalisierung bewahrt funktionalen Whitespace, der die CSS-Semantik beeinflusst. Manche CSS-Selektoren und Werte benoetigen spezifischen internen Whitespace, um korrekt zu parsen, etwa der Descendant-Combinator zwischen zwei Klassen-Selektoren oder der Abstand zwischen calc-Operanden. Der Formatierer erkennt diese semantisch signifikanten Whitespaces und laesst sie unveraendert. Nur dekorativer Whitespace, der die CSS-Bedeutung nicht beeinflusst, wird auf die Standardkonvention normalisiert. Die Unterscheidung zwischen funktionalem und dekorativem Whitespace ist Teil der Token-Parsing-Logik des Formatierers.

Ein leicht uebersehener Vorteil konsistenter Whitespace-Formatierung ist sauberere Diff-Ausgabe in Versionskontroll-Systemen. Wenn ein Entwickler eine Aenderung in einer Deklaration vornimmt, sollte der Diff nur diese Aenderung zeigen, nicht eine zusaetzliche Aenderung in benachbartem Whitespace, weil sein Editor die Datei beim Speichern neu formatiert hat. Konsistente Whitespace-Konventionen ueber das Repository hinweg eliminieren diese Whitespace-Rauschen aus Diffs vollstaendig, was Code-Reviews schneller und gruendlicher macht. Reviewer koennen sich auf die echten Aenderungen konzentrieren, statt visuelles Rauschen zu filtern.

MDN Web Docs: CSS W3C CSS Syntax Specification

How to use this tool

💡

Fuegen Sie Ihr CSS in den Formatierer ein und klicken Sie auf Formatieren. Die Ausgabe hat konsistenten Whitespace in der gesamten Datei.

So Funktioniert Es

Schritt-für-Schritt-Anleitung für css-whitespace-formatierer:

1
CSS einfuegen
Oeffnen Sie den FixTools-CSS-Formatierer und fuegen Sie das CSS mit inkonsistentem Whitespace in das Eingabefeld ein. Das Tool akzeptiert jeden Whitespace-Zustand, von vollstaendig fehlendem Whitespace bis hin zu uebermaessigem Padding zwischen Tokens.
2
Formatieren
Klicken Sie auf die Formatieren-Schaltflaeche, um die Whitespace-Normalisierung zu starten. Der Formatierer parst Ihre Eingabe, identifiziert jedes semantisch signifikante und dekorative Whitespace-Token und gibt das Stylesheet mit konsistentem Whitespace ueberall neu aus.
3
Ausgabe pruefen
Scannen Sie die formatierte Ausgabe, um zu bestaetigen, dass der Whitespace einheitlich ist. Achten Sie auf konsistente Doppelpunkt-Abstaende, einheitliche Klammer-Platzierung und sauber separierten Regeln durch Leerzeilen, wo angemessen.
4
In die Quelle einfuegen
Kopieren Sie die formatierte Ausgabe und ersetzen Sie das Original in Ihrer Quelldatei. Committen Sie die Aenderung als dedizierten Whitespace-Commit fuer saubere git-Historie und einfache Review.

Praxisbeispiele

Häufige Situationen, in denen dieser Ansatz wirklich hilft:

Ein Senior-Entwickler normalisiert den Whitespace in einem Repository, bevor er einen automatisierten Linter in der CI-Pipeline aktiviert.

Der Entwickler will stylelint mit Whitespace-Regeln zur CI hinzufuegen, aber das wuerde sofort hunderte Verstoesse in der bestehenden Codebase erzeugen. Statt jeden in einzelnen Commits zu beheben, normalisiert er das gesamte Repository in einem einzigen Whitespace-Commit, und der CI-Lauf startet sauber, ohne historische Verstoesse zu generieren.

Ein Team-Mitglied integriert ein externes Theme in seine Codebase und normalisiert dessen Whitespace zuerst, um es mit dem internen Stil auszurichten.

Das externe Theme verwendet andere Whitespace-Konventionen, was zu inkonsistenten Diffs in zukuenftigen Wartungsarbeiten fuehren wuerde. Der Entwickler laesst das Theme durch den Whitespace-Formatierer laufen, bevor er es committet, und das Theme integriert sich nahtlos in die etablierte Whitespace-Konvention des Repositories.

Ein Code-Review-Reviewer normalisiert ein eingereichtes Snippet, um es mit dem Repository-Stil zu vergleichen, ohne den Beitragenden zu unterbrechen.

Der Reviewer will pruefen, ob das vorgeschlagene Snippet substanziell mit dem bestehenden Stil uebereinstimmt, sobald Whitespace normalisiert ist. Er kopiert das Snippet in den Whitespace-Formatierer, vergleicht die normalisierte Version mit der entsprechenden Region des Repositories und gibt produktives Feedback ohne sich von Whitespace-Inkonsistenzen ablenken zu lassen.

Ein Entwickler bereitet eine Codebase fuer Open-Source-Release vor und normalisiert Whitespace, damit der erste Eindruck von Code-Qualitaet stark ist.

Der Release ist eine grosse Chance fuer das Projekt, breitere Aufmerksamkeit zu gewinnen, und der Entwickler will sicherstellen, dass externe Browse-Besucher sauberen, konsistenten Code sehen. Ein Whitespace-Normalisierungs-Pass durch das gesamte Stylesheet-Verzeichnis dauert eine Stunde und macht den Release professioneller aussehen, was die Beitrags-Bereitschaft externer Entwickler erhoeht.

When to use this guide

Nutzen Sie dies, wenn Ihr CSS inkonsistente Abstaende um Doppelpunkte, Klammern oder Selektoren hat und Sie eine einheitliche Konvention durchsetzen muessen.

Expertentipps

Erzielen Sie bessere Ergebnisse mit diesen Expertenvorschlägen:

Funktionalen Whitespace nicht manuell anpassen

Vermeiden Sie es, manuell Whitespace in CSS-Selektoren oder Werten anzupassen, weil manche Whitespace-Zeichen semantisch signifikant sind. Der Descendant-Combinator zwischen zwei Selektoren ist ein Leerzeichen; Adjacent-Sibling-Combinators verwenden Pluszeichen mit umgebendem Whitespace. Lassen Sie den Formatierer diese Faelle bestimmen, statt sie manuell zu raten.

Whitespace-Konvention in EditorConfig erfassen

Wenn Sie eine Whitespace-Konvention fuer Ihr Projekt waehlen, dokumentieren Sie sie in einer .editorconfig-Datei am Repository-Root. Die meisten Editoren respektieren diese Datei automatisch und werden konsistente Whitespace-Einstellungen anwenden, wann immer ein Entwickler eine Datei in diesem Projekt bearbeitet. Das verhindert die Re-Einfuehrung von Whitespace-Inkonsistenzen.

Whitespace-Reparatur isoliert committen

Wenn Sie Whitespace ueber ein gesamtes Repository reparieren, machen Sie es als einen einzigen Commit ohne andere logische Aenderungen. Die git-blame-Ausgabe profitiert massiv von dieser Trennung, weil Reviewer und Geschichts-Inspektoren ueber den Formatierungs-Commit hinwegspringen koennen, um den vorherigen logischen Autor jeder Zeile zu sehen.

Whitespace nach Copy-Paste aus externen Quellen normalisieren

Wann immer Sie CSS aus einer externen Quelle wie Stack Overflow, einer Dokumentation oder einem Design-Tool kopieren, lassen Sie es durch den Whitespace-Formatierer laufen, bevor Sie es in Ihr Projekt einfuegen. Externe Quellen verwenden oft unterschiedliche Whitespace-Konventionen, und die Normalisierung verhindert, dass Sie versehentlich inkonsistente Konventionen in Ihr Repository einfuehren.

Whitespace vor jedem Commit normalisieren

Lassen Sie den Whitespace-Formatierer vor dem Commit laufen, um sicherzustellen, dass Ihr Diff nur Inhaltsaenderungen zeigt, nicht Whitespace-Rauschen, das aus Editor-Konfigurations-Inkonsistenzen entsteht.

Team-Konvention dokumentieren

Wenn Ihr Team eine spezifische Whitespace-Konvention bevorzugt, dokumentieren Sie sie in Ihrer CONTRIBUTING.md oder im README, sodass neue Mitwirkende den Standard kennen und ihn von Anfang an einhalten.

Whitespace-Reparatur fuer Legacy-Migrationen nutzen

Wenn Sie eine alte Codebase mit gemischten Whitespace-Konventionen erben, lassen Sie alle CSS-Dateien durch den Formatierer laufen, um eine einheitliche Basis zu etablieren, bevor Sie Feature-Arbeit beginnen.

FAQ

Häufig gestellte Fragen

Der Formatierer folgt weit verbreiteten Branchenkonventionen: ein Leerzeichen nach jedem Doppelpunkt zwischen Eigenschaft und Wert, kein Leerzeichen vor Semikolons, ein Leerzeichen vor oeffnenden geschweiften Klammern und kein zusaetzlicher Whitespace nach schliessenden geschweiften Klammern. Diese Konventionen entsprechen den Defaults von Prettier, stylelint und den meisten anderen etablierten CSS-Formatierungs-Tools.

Ja, wenn der Whitespace semantisch signifikant ist. Funktionaler Whitespace innerhalb von calc-Ausdruecken, zwischen Selektor-Combinators und in mehrwertigen Eigenschaften wie box-shadow wird erhalten. Nur dekorativer Whitespace, der die CSS-Bedeutung nicht beeinflusst, wird auf die Standardkonvention normalisiert.

Nein. CSS-Whitespace, das die Konventionen befolgt, die der Formatierer anwendet, ist visuell aequivalent ueber alle Variationen hinweg. Browser parsen CSS auf Token-Ebene, und die Tokens sind identisch unabhaengig davon, ob Sie color: red; oder color :red ; schreiben. Sie koennen mit absoluter Sicherheit normalisieren.

Ja. Mehrfache aufeinanderfolgende Leerzeilen werden auf eine einzige Leerzeile zwischen logischen Regelbloecken normalisiert. Dies haelt das Stylesheet visuell sauber, ohne uebermaessiges vertikales Padding, das die Lesbarkeit beeintraechtigt. Wenn Ihr Original mehrere aufeinanderfolgende Leerzeilen hatte, wird die Ausgabe weniger haben.

Ja. Vendor-praefixierte Eigenschaften wie -webkit-transition oder -moz-appearance erhalten denselben Whitespace-Behandlung wie standard-Eigenschaften: kein vorausgehender Whitespace zum Doppelpunkt, ein folgender Whitespace und ein abschliessender Semikolon. Die Vendor-Praefixe selbst werden vollstaendig erhalten.

Ja, Einrueckung ist eine Form von Whitespace und wird im selben Durchgang normalisiert. Der Formatierer behandelt Einrueckung, Doppelpunkt-Abstaende, Klammer-Whitespace und Zeilenumbrueche alle als Teil seiner umfassenden Whitespace-Strategie. Sie erhalten in einem einzigen Lauf einheitlichen Whitespace ueber alle Dimensionen hinweg.

Whitespace innerhalb von CSS-Kommentar-Inhalten wird genau wie geschrieben erhalten, weil Kommentar-Inhalt vollstaendig vom Formatierer ignoriert wird. Whitespace um die Kommentar-Begrenzer wird auf konsistente Konventionen normalisiert, sodass Kommentare auf der angemessenen Einrueckungs-Ebene und mit angemessenen umgebenden Zeilenumbruechen erscheinen.

Der Formatierer ist fuer Standard-CSS-Syntax designt. SCSS- und Less-Dateien enthalten praeprozessor-spezifische Konstrukte wie Variablen, Mixins und Eltern-Selektor-Referenzen, die nicht Teil von Standard-CSS sind. Manche dieser Konstrukte werden mit angemessenem Whitespace durchgereicht, aber andere koennten unerwartete Ausgabe produzieren. Fuer Praeprozessor-Quelldateien nutzen Sie ein Tool, das die spezifische Praeprozessor-Syntax versteht.

Nein. Whitespace innerhalb von in Anfuehrungszeichen gesetzten String-Werten, etwa in content-Eigenschaften, font-family-Listen oder url-Funktionen, wird exakt wie geschrieben erhalten. Strings sind unveraenderliche Tokens aus der Perspektive des Formatierers, und ihr interner Inhalt wird nie modifiziert.

In der Praxis ist Whitespace-Formatierung eine Teilmenge der vollstaendigen CSS-Formatierung. Vollstaendige Formatierung umfasst auch Operationen wie das Sortieren von Selektoren auf eigene Zeilen, das Sicherstellen, dass jede Deklaration auf einer eigenen Zeile steht, und das Reorganisieren mehrzeiliger Werte. Der FixTools-Whitespace-Formatierer ist tatsaechlich ein vollstaendiger Formatierer, der von Whitespace-bewussten Konventionen geleitet wird; es gibt kein separates Whitespace-only-Modus.