CSS formatieren

Was dabei zu beachten ist

Der Zerleger liest Zeichen für Zeichen statt mit einem Suchmuster. Das klingt umständlich, ist aber nötig: In content: "}" oder in einem url(data:…;base64,…) stehen geschweifte Klammern und Semikolons, die keine Struktur bedeuten. Einfache Ausdrücke zerlegen genau daran die Datei.

Mehrere Selektoren einer Regel bekommen je eine eigene Zeile. So sieht man auf einen Blick, was die Regel alles trifft – bei langen Listen der häufigste Grund für ungewollte Nebenwirkungen.

Beim Verkleinern fallen Kommentare weg. Ausgenommen sind solche, die mit /*! beginnen: Damit werden Lizenzhinweise gekennzeichnet, die aus rechtlichen Gründen erhalten bleiben müssen.

Ob deine Seite unbenutztes CSS ausliefert und wie stark das die Ladezeit bremst, zeigt die Messung im Seiten-Check.

Wo das Gewicht wirklich herkommt

Verkleinern spart Zeichen, nicht Regeln. Der übliche Grund für ein Stylesheet mit hunderten Kilobyte ist ein anderer: ein Baukasten oder ein Theme, von dem die Seite fünf Prozent benutzt und hundert Prozent ausliefert. Dagegen hilft kein Formatierer, sondern Aufräumen – oder ein Werkzeug, das die tatsächlich benutzten Regeln heraussucht.

Der zweite Punkt ist die Reihenfolge: Ein Stylesheet blockiert das Rendern, bis es geladen ist. Ob es dabei 40 oder 45 Kilobyte hat, merkt niemand; ob es überhaupt im Kopf steht und wie viele weitere Dateien daneben liegen, schon.

Was beim Verkleinern erhalten bleibt

Kommentare fallen weg, Leerraum ebenfalls, die letzte Semikolonstelle je Block wird gestrichen. Unangetastet bleiben Zeichenketten in content, Werte in url() und alles, was in einer Medienabfrage steht – dort verändert schon ein entferntes Leerzeichen die Bedeutung. Ebenso bleiben eigene Eigenschaften erhalten, also die --variablen, aus denen moderne Themes bestehen.