compress CSS Minifizierer / Formatierer star

So funktioniert es

Minifizieren verringert die Dateigröße, indem alles entfernt wird, was ein maschineller Parser nicht braucht, ein menschlicher Leser aber schätzen würde: Kommentare, Zeilenumbrüche, Einrückung und das abschließende Semikolon vor einer schließenden Klammer. Nichts davon hat Bedeutung dafür, wie ein Browser die Stile anwendet — ein Stylesheet mit jeder Regel in einer Zeile und ohne Leerzeichen verhält sich identisch zu einem sauber formatierten, nur ist es kleiner und schneller herunterzuladen. Das ist in der Produktion wichtig, weil CSS das Rendern der Seite blockiert, bis es heruntergeladen und geparst ist — jedes eingesparte Kilobyte verbessert also die Ladegeschwindigkeit direkt, besonders bei langsamen Verbindungen.

Formatieren ist die umgekehrte Operation und tatsächlich schwieriger: Es nimmt komprimiertes oder unordentliches CSS und rückt es neu ein, mit einer Deklaration pro Zeile, einer Regel pro Block und konsistenten Abständen um Doppelpunkte und Klammern. Das ist eine Art Reverse Engineering, denn die ursprüngliche Formatierung — und besonders alle Kommentare — geht in dem Moment verloren, in dem eine Datei minifiziert wird; nur die strukturelle Formatierung (welcher Selektor zu welchen Deklarationen gehört) lässt sich wiederherstellen, nicht die ursprünglichen Zeilenumbrüche oder Notizen des Autors. Zum Beispiel wird aus .btn{color:red;padding:8px} ein sauber eingerückter Block, in dem color: red; und padding: 8px; innerhalb von .btn { } jeweils in einer eigenen Zeile stehen.

Was Sie wissen sollten

• Beide Richtungen bewahren das Verhalten exakt. Selektoren, Eigenschaften, Werte und Kaskadenreihenfolge bleiben unangetastet — nur Leerzeichen und Kommentare ändern sich, sodass Spezifität und Vererbung vorher und nachher identisch funktionieren.
• Dies ist ein schlankes, regex-basiertes Werkzeug, kein vollständiger CSS-Parser (wie PostCSS). Es verarbeitet Standard-CSS korrekt, aber Inhaltswerte mit wörtlichen {, } oder ; innerhalb von Anführungszeichen (in der Praxis selten, meist bei generierten content:-Werten) werden eventuell nicht perfekt formatiert.
• Sass/Less-Syntax wird nicht verarbeitet. Verschachtelung, Variablen und Mixins sind für sich genommen kein gültiges CSS und laufen daher weitgehend unverändert durch, statt kompiliert zu werden — Sie benötigen weiterhin Sass oder Less selbst, um sie zunächst in reines CSS zu verwandeln.
• Kommentare sind das Einzige, was Minifizieren dauerhaft verwirft. Dokumentiert ein Kommentar einen browserspezifischen Hack oder eine "Nicht entfernen"-Warnung, bewahren Sie eine Kopie der unminifizierten Quelle irgendwo auf — die komprimierte Ausgabe hat keine Möglichkeit, ihn zurückzuholen.

Ein konkreter Vergleich: Eine formatierte Regel wie .card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); } minifiziert sich zu .card{border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1)} — merklich kürzer, und über ein komplettes Stylesheet mit Dutzenden Regeln, Kommentaren und verschachtelten Media-Queries liegt diese Ersparnis typischerweise zwischen 20 % und 40 % der ursprünglichen Dateigröße.