CSS-Formatierer
CSS mit einem Klick verschonern oder komprimieren. Unterstutzt alphabetische Eigenschaftssortierung sowie @media, @keyframes und alle Standard-At-Rules.
Hat dieses Tool Ihr Problem gelöst?
Haufig gestellte Fragen
Was bewirkt CSS-Verschonerung?
CSS-Verschonerung (Formatierung) nimmt komprimiertes oder uneinheitlich geschriebenes CSS und formatiert es neu: jede Deklaration in einer eigenen Zeile, korrekte Einruckung innerhalb von Regelblocken und Leerzeilen zwischen Regeln fur bessere Lesbarkeit. Es ist rein kosmetisch — die gerenderten Stile sind identisch.
Was ist Eigenschaftssortierung und warum ist sie nutzlich?
Eigenschaftssortierung ordnet Deklarationen innerhalb jedes Regelblocks alphabetisch (A→Z) an. Sortiertes CSS lasst sich leichter nach bestimmten Eigenschaften durchsuchen und hilft, Duplikate zu vermeiden. Stilrichtlinien wie alphabetische Sortierung helfen Teams, uber die gesamte Codebasis konsistent zu bleiben.
Beeinflusst CSS-Komprimierung das Seitenaussehen?
Nein. CSS-Komprimierung entfernt Leerzeichen, Kommentare und das letzte Semikolon in Regelblocken — all das ist semantisch unbedeutend. Browser interpretieren komprimiertes und formatiertes CSS identisch. Komprimiertes CSS ist typischerweise 20–40% kleiner als formatiertes CSS.
Werden @media-Abfragen und @keyframes unterstutzt?
Ja. At-Rules wie @media, @keyframes, @supports und @font-face werden erkannt und ihre inneren Blocke korrekt eingeruckt. @import und @charset (die keinen Block haben) werden als einzeilige Anweisungen formatiert.
Kann es SCSS oder Less verarbeiten?
Der Formatierer verarbeitet Standard-CSS-Syntax und bearbeitet gultige CSS-Teile von SCSS/Less-Dateien. SCSS-spezifische Funktionen wie Variablen ($var), Verschachtelung und Mixins (@mixin) werden moglicherweise nicht korrekt formatiert, da sie keine Standard-CSS-Syntax sind.
Wie formatiere ich CSS automatisch in meinem Projekt?
Verwenden Sie Prettier mit einer .prettierrc-Konfiguration oder Stylelint mit dem stylelint-config-prettier-Preset. Fur Tailwind-CSS-Projekte kann das Tailwind-Prettier-Plugin Utility-Klassen sortieren. Der integrierte CSS-Formatierer von VS Code (Shift+Alt+F) eignet sich auch fur schnelle lokale Formatierung.