Free · Fast · Privacy-first

CSS-Einrueckung reparieren

Wenn Ihr CSS gemischte Tabs und Leerzeichen, inkonsistente Einrueckungs-Tiefen, falsch eingerueckte verschachtelte Regeln oder verstreute Whitespace-Probleme hat, repariert der FixTools-Einrueckungs-Reparator das alles in einem einzigen Durchlauf.

⚡

Korrigiert gemischte Tabs und Leerzeichen sofort

🔒

Normalisiert Einrueckungs-Tiefen ueber die gesamte Datei

✨

Behandelt verschachtelte At-Rules und native Verschachtelung

⚡

Browser-basiert, ohne Konto oder Installation

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.

Warum CSS-Einrueckung wichtig ist und wie man sie effektiv repariert

Einrueckung ist die primaere visuelle Hilfe, die Entwickler verwenden, um die Struktur eines Stylesheets zu verstehen. Eine korrekt eingerueckt Regel macht sofort sichtbar, dass sie zu einer bestimmten Media Query gehoert, dass eine Custom Property in einem bestimmten Geltungsbereich definiert ist oder dass eine verschachtelte Regel ein bestimmtes Elternelement hat. Wenn die Einrueckung inkonsistent ist, geht diese visuelle Hilfe verloren, und der Entwickler muss die Klammer-Struktur jeder Regel manuell parsen, um zu verstehen, was wohin gehoert. Das schadet sowohl der Lesegeschwindigkeit als auch der Fehlersuche, weil das Auge nicht mehr darauf vertrauen kann, dass visuelle Positionierung logische Struktur widerspiegelt.

Inkonsistente Einrueckung tritt aus mehreren haeufigen Gruenden auf. Mehrere Entwickler mit unterschiedlichen Editor-Konfigurationen koennen abwechselnd dieselbe Datei bearbeiten, jeder hinterlaesst seinen eigenen Stil. Eine Copy-Paste-Operation aus einer externen Quelle kann eine andere Einrueckungs-Konvention einfuehren, ohne dass es jemand bemerkt. Eine automatische Formatierungs-Operation, die mitten im Lauf abgebrochen wurde, kann eine Datei in einem teilweise konvertierten Zustand hinterlassen. Eine Migration von Tab-Einrueckung zu Leerzeichen-Einrueckung, die nicht vollstaendig auf alle Dateien angewendet wurde, kann zu gemischten Konventionen in einem Repository fuehren. In allen diesen Faellen ist eine schnelle Einrueckungs-Reparatur der einfachste Weg, die Konsistenz wiederherzustellen.

Der Einrueckungs-Reparator behandelt mehrere subtile Probleme, die manuelle Korrektur muehsam machen. Gemischte Tabs und Leerzeichen, in denen verschiedene Zeilen unterschiedliche Whitespace-Zeichen fuer dieselbe Einrueckungs-Tiefe verwenden, werden auf eine einzige konsistente Konvention normalisiert. Verschachtelte Regeln innerhalb von At-Rules wie Media Queries werden in die korrekte Tiefe relativ zu ihren Eltern eingerueckt. Native CSS-Verschachtelung, ein modernes Feature, das eine Bewusstsein fuer die Kaskaden-Tiefe erfordert, wird korrekt behandelt, sodass jeder verschachtelte Selektor seine logische Einrueckungs-Ebene hat. Schliessende Klammern werden auf eigenen Zeilen platziert und auf die Tiefe ihrer entsprechenden oeffnenden Klammer ausgerichtet.

Nach der Einrueckungs-Reparatur ist eine empfohlene Folgepraxis, einen einzigen Commit mit einer Beschreibung wie style: normalize CSS indentation einzureichen. Das isoliert die Whitespace-Aenderungen in einem Commit, sodass zukuenftige git-blame-Operationen ueber sie hinwegspringen koennen, ohne historischen Kontext zu verlieren. Wenn Sie hingegen die Einrueckungs-Reparatur mit anderen logischen Aenderungen vermischen, werden die echten Aenderungen in einem Meer von Whitespace-Aenderungen verloren, was den Diff fuer Reviewer schwer zu lesen macht. Ein dedizierter Formatierungs-Commit ist eine kleine Disziplin mit grosser langfristiger Auszahlung.

MDN Web Docs: CSS Google Web.dev: Learn CSS

How to use this tool

💡

Fuegen Sie CSS mit kaputter Einrueckung ein und klicken Sie auf Formatieren. Die Ausgabe hat einheitliche Einrueckung in der gesamten Datei.

So Funktioniert Es

Schritt-für-Schritt-Anleitung für css-einrueckung reparieren:

1
Datei mit kaputter Einrueckung kopieren
Identifizieren Sie das CSS, dessen Einrueckung Probleme hat, und kopieren Sie den gesamten Inhalt. Es ist wichtig, die gesamte Datei zu kopieren statt nur eines Abschnitts, weil partielle Reparatur Inkonsistenzen zwischen reparierten und unreparierten Bereichen einfuehren wuerde.
2
In den Formatierer einfuegen
Fuegen Sie das CSS in das Eingabefeld des FixTools-Formatierers ein. Das Tool akzeptiert jeden Eingabezustand, inklusive gemischter Whitespace-Zeichen, inkonsistenter Einrueckungs-Tiefen und falsch ausgerichteter Klammern. Es ist keine Vorverarbeitung erforderlich.
3
Formatieren und Einrueckung reparieren
Klicken Sie auf Formatieren, um den Reparatur-Prozess zu starten. Der Formatierer parst die logische Struktur Ihres CSS, identifiziert die korrekte Einrueckungs-Tiefe fuer jede Zeile und gibt das Stylesheet mit perfekt konsistenter Einrueckung neu aus. Die Operation schliesst sich in Millisekunden ab.
4
Ueberpruefen und ersetzen
Pruefen Sie die formatierte Ausgabe visuell, um zu bestaetigen, dass die Einrueckung konsistent ist und die Verschachtelungs-Struktur Ihrer Erwartung entspricht. Kopieren Sie das Ergebnis und ersetzen Sie die originale Quelle in Ihrer Datei. Committen Sie als dedizierten Formatierungs-Commit fuer saubere git-Historie.

Praxisbeispiele

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

Ein Team-Lead repariert die Einrueckung in einer geerbten Legacy-Codebase, in der drei Generationen von Entwicklern unterschiedliche Konventionen hinterlassen haben.

Die Codebase hat ueber sechs Jahre Beitraege von zwoelf verschiedenen Entwicklern angesammelt, jeder mit eigenen Editor-Einstellungen. Der Team-Lead repariert jede CSS-Datei in einem dedizierten Formatierungs-Commit, fuegt eine .editorconfig hinzu, um zukuenftige Konsistenz durchzusetzen, und merkt, dass Code-Reviews innerhalb von Wochen einfacher und produktiver werden.

Ein Entwickler migriert eine Codebase von Tab-Einrueckung zu Vier-Leerzeichen-Einrueckung und nutzt den Reparator, um die Aenderung in einem Pass auf das gesamte Projekt anzuwenden.

Die Migration ist Teil einer breiteren Modernisierungs-Initiative, die das Projekt mit den Konventionen seiner Schwester-Repositories ausrichtet. Der Entwickler laesst jede CSS-Datei durch den Reparator laufen, der gemischte Tabs zu Leerzeichen normalisiert, committet jede Datei als separaten Aenderungs-Commit fuer einfache Review und schliesst die Migration in einem Nachmittag ab.

Ein Junior-Entwickler erbt eine CSS-Datei mit kaputter Einrueckung und nutzt den Reparator, um sie zu strukturieren, bevor er die Struktur studiert.

Die Datei ist Teil eines neuen Feature-Branches, an dem der Junior-Entwickler arbeiten soll, aber die Einrueckung ist so inkonsistent, dass er die Verschachtelungs-Struktur visuell nicht parsen kann. Er repariert die Einrueckung als ersten Schritt, dann liest er die strukturierte Ausgabe und versteht endlich, welche Regeln in welche Media Queries verschachtelt sind.

Ein QA-Ingenieur repariert die Einrueckung in einem Bug-Report-Snippet, bevor er es einem Tickets-Reviewer praesentiert, sodass die Strukturprobleme klarer hervortreten.

Das urspruengliche Snippet wurde aus DevTools mit gemischter Einrueckung kopiert, was es schwer zu lesen machte. Nach der Reparatur ist die Verschachtelungs-Struktur klar sichtbar, und das fehlerhafte Verhalten kann leicht auf die spezifische problematische Regel zurueckgefuehrt werden. Der Reviewer schaetzt den vorbereiteten Bug-Report und schliesst das Ticket schneller.

When to use this guide

Nutzen Sie dies, wenn Ihr CSS gemischte Einrueckung oder falsch eingerueckte verschachtelte Bloecke hat und Sie eine konsistente, lesbare Struktur wiederherstellen muessen.

Expertentipps

Erzielen Sie bessere Ergebnisse mit diesen Expertenvorschlägen:

Gemischte Tabs und Leerzeichen frueh erkennen

Wenn Sie nach der Reparatur unerwartete Ergebnisse sehen, koennte die urspruengliche Datei eine Mischung aus Tabs und Leerzeichen enthalten haben, die rein visuell nicht erkennbar war. Die meisten Editoren bieten einen Modus, der Whitespace-Zeichen sichtbar macht; verwenden Sie ihn, um den Zustand vor der Reparatur zu inspizieren und das Reparatur-Ergebnis besser zu verstehen.

Einrueckungs-Tiefe an verschachtelte Strukturen anpassen

Tiefe Verschachtelung von vier oder fuenf Ebenen wird mit Vier-Leerzeichen-Einrueckung schnell visuell unangenehm. Erwaegen Sie Zwei-Leerzeichen-Einrueckung fuer Projekte mit signifikanter Verschachtelung, wie modernen CSS-Codebases mit umfangreichen Media Queries und Container Queries. Die kompaktere Einrueckung haelt tiefe Bloecke lesbar.

EditorConfig zur Verhinderung von Rueckschritten verwenden

Nach dem Reparieren der Einrueckung ist es wertvoll, eine .editorconfig-Datei im Repository-Root zu committen, die die Einrueckungs-Konvention dokumentiert. Die meisten modernen Editoren respektieren diese Datei automatisch, sodass neue Mitwirkende mit der korrekten Einstellung beginnen, ohne sie manuell konfigurieren zu muessen. Das verhindert die Wiedereinfuehrung von Einrueckungs-Inkonsistenz.

Nach Bulk-Reparatur visuell pruefen

Nach einer Bulk-Einrueckungs-Reparatur auf einem grossen Stylesheet scrollen Sie durch die formatierte Ausgabe und scannen Sie nach Bloecken, die unerwartet eingerueckt sind. Diese koennten auf Strukturprobleme in der Quelle hinweisen, wie eine ungeschlossene Klammer oder eine fehlplatzierte At-Rule, die der Reparator getreu reflektiert hat. Identifizieren und korrigieren Sie sie, bevor Sie das Ergebnis committen.

Vor der Reparatur eine Editor-Konvention waehlen

Entscheiden Sie sich vor dem Reparieren, ob Ihr Projekt Zwei- oder Vier-Leerzeichen-Einrueckung verwendet. Konsistenz ueber das gesamte Repository ist wichtiger als die spezifische Wahl.

Einrueckungs-Reparatur in einem dedizierten Commit

Committen Sie die Einrueckungs-Reparatur als einzigen Commit ohne andere logische Aenderungen. So bleibt git blame fuer die echten Code-Aenderungen sauber, und Reviewer koennen die formatierungs-only-Aenderungen schnell ueberspringen.

EditorConfig-Datei zum Repository hinzufuegen

Nach der Einrueckungs-Reparatur fuegen Sie eine .editorconfig-Datei zum Repository hinzu, um Ihre gewaehlte Einrueckungs-Konvention zu dokumentieren. Die meisten Editoren respektieren diese Datei automatisch, was hilft, zukuenftige Inkonsistenzen zu verhindern.

FAQ

Häufig gestellte Fragen

Der Reparator verwendet standardmaessig Zwei-Leerzeichen-Einrueckung, was die am weitesten verbreitete Konvention in der modernen CSS-Entwicklungs-Community ist. Dies passt natuerlich zu Konventionen, die in HTML, JSX und JSON verwendet werden, was die visuelle Konsistenz zwischen verschiedenen Dateitypen in Ihrem Projekt foerdert. Die Ausgabe ist deterministisch, sodass mehrere Laeufe identische Ergebnisse produzieren.

Der Reparator behandelt gemischte Tabs und Leerzeichen als Standardfall. Er parst die logische Struktur Ihres CSS, ignoriert das spezifische Whitespace-Zeichen auf jeder Zeile und gibt das Stylesheet mit konsistentem Leerzeichen-basierten Whitespace neu aus. Tabs werden in der Ausgabe nicht erhalten; alle Einrueckung wird auf das gewaehlte Leerzeichen-Format normalisiert.

Nein. Einrueckung ist rein visuell, und Browser parsen CSS auf Tokenstrom-Ebene, ohne den Whitespace zu berucksichtigen, der die Tokens trennt. Sie koennen mit absoluter Sicherheit reparieren; die gerenderte Ausgabe wird in keinem Browser, auf keinem Geraet und in keinem Viewport veraendert. Nur die Lesbarkeit der Quelldatei aendert sich.

Ja. Schliessende Klammern werden auf eigene Zeilen platziert und auf die Tiefe ihrer entsprechenden oeffnenden Klammer ausgerichtet. Wenn Ihre Quelle eine schliessende Klammer am Ende einer Deklarations-Zeile statt auf einer eigenen Zeile hatte, wird der Reparator sie in die korrekte Position bewegen. Das ist Teil der Standard-Formatierungs-Operation und kein separater Schritt.

Ja. Native CSS-Verschachtelung, ein modernes Feature, das in den meisten Browsern unterstuetzt wird, wird vom Reparator korrekt geparst und formatiert. Verschachtelte Regeln werden in die korrekte Tiefe relativ zu ihrem Elternelement eingerueckt, sodass die Verschachtelungs-Hierarchie zu einer sichtbaren Einrueckungs-Hierarchie wird. Das funktioniert fuer Verschachtelung jeder Tiefe.

Der Reparator wendet umfassende Formatierung an, einschliesslich Einrueckung, Zeilenumbrueche und Whitespace-Normalisierung in einem einzigen Durchgang. Wenn Sie nur die Einrueckung reparieren wollen, ohne andere Formatierungs-Aspekte zu beruehren, koennten Sie ein konfigurierbares Tool wie stylelint mit selektiven Regeln benoetigen. Fuer die meisten Anwendungsfaelle bietet das All-in-One-Verhalten des FixTools-Reparators die saubersten Ergebnisse.

Standardmaessig fuegt der Reparator zwei Leerzeichen pro Einrueckungs-Ebene hinzu, was eine kompakte und doch lesbare visuelle Hierarchie produziert. Eine Top-Level-Regel hat null Einrueckung, eine Eigenschaft innerhalb dieser Regel hat zwei Leerzeichen, eine verschachtelte Regel innerhalb einer Media Query hat zwei Leerzeichen, und eine Eigenschaft innerhalb dieser verschachtelten Regel hat vier Leerzeichen.

Der Online-Reparator verwendet standardmaessig Leerzeichen, weil es die ueberwiegend dominante Konvention in modernen CSS-Codebases ist. Wenn Ihr Projekt Tab-Einrueckung erfordert, koennten Sie ein konfigurierbares Tool wie Prettier mit den entsprechenden Einstellungen verwenden, oder Sie koennten die Ausgabe mit einer einfachen Find-und-Replace-Operation in Ihrem Editor von Leerzeichen zu Tabs konvertieren.

Ja. Whitespace innerhalb von Selektoren, etwa zwischen Combinators oder um Attribut-Selektoren herum, wird auf konsistente Konventionen normalisiert. Komma-getrennte Selektor-Listen werden mit jedem Selektor auf einer eigenen Zeile formatiert, was es einfach macht, einzelne Selektoren in einer Liste zu finden und zu aendern. Die semantische Bedeutung des Selektors aendert sich nie.

Wenn Sie die originale Datei nicht in Versionskontrolle haben, gibt es keinen Weg, den vor-Reparatur-Zustand wiederherzustellen, weil der Reparator die Ausgabe in das Eingabefeld ueberschreibt und kein Undo bietet. Bewahren Sie immer eine Kopie der originalen Datei auf, bevor Sie sie reparieren, entweder durch Verwenden eines Versionskontroll-Systems oder durch Speichern einer Backup-Kopie auf der Platte.