CSS-Formatierer

CSS wirkt einfach genug, um mit ein paar Suchen-und-Ersetzen-Regeln umzuformatieren — einen Zeilenumbruch nach jedem Semikolon einfügen, innerhalb geschweifter Klammern einrücken — bis Verschachtelung, Media Queries, und moderne Funktionen wie benutzerdefinierte Eigenschaften und Container Queries tatsächlich in der Datei sind. Ein regex-basierter Ansatz hat kein echtes Konzept von Verschachtelungstiefe, daher kann er eine Media Query mit mehreren verschachtelten Selektoren nicht korrekt einrücken, und er hat keine Möglichkeit, ein Semikolon, das eine Deklaration beendet, von einem zu unterscheiden, das innerhalb eines Zeichenkettenwerts oder einer benutzerdefinierten Eigenschaft mit beliebigem Text erscheint. Das Stylesheet zuerst in eine echte Struktur zu analysieren — zu verstehen, welche Regel in welcher verschachtelt ist, wo jeder Block beginnt und endet — ist es, was die Formatierung bei echtem, nicht-trivialem CSS korrekt macht, nicht nur bei Spielzeugbeispielen.

Die Minifizierung dieses Tools beschränkt sich auf das Entfernen von Leerzeichen und Kommentaren — die Teile eines Stylesheets, die rein für einen lesenden Menschen existieren und keine Bedeutung für die Rendering-Engine des Browsers tragen. Es fügt bewusst keine doppelten Selektoren zusammen, ordnet keine Deklarationen neu, und kürzt keine Farbwerte wie das Umschreiben von `#ffffff` zu `#fff`, obwohl ein aggressiverer Minifizierer alle drei tun und eine kleinere Datei erzeugen könnte. Diese Transformationen können das Verhalten auf leicht zu übersehende Weisen ändern: Zwei Regeln mit demselben Selektor, aber an unterschiedlichen Stellen der Kaskade geschrieben, zusammenzufügen kann ändern, welche Deklaration bei Konflikt gewinnt, und das Neuordnen von Deklarationen trägt dasselbe Risiko. Das reine Entfernen von Leerzeichen trägt dieses Risiko nicht — es kann nicht ändern, was ein Browser rendert, nur wie viele Bytes es braucht, es zu beschreiben.

Webserver komprimieren Textressourcen fast universell mit gzip oder brotli vor dem Senden über das Netzwerk, und beide Komprimierungsalgorithmen sind sehr gut darin, genau die Art von Redundanz auszunutzen, die Leerzeichen und konsistente Einrückung darstellen — wiederholte Leerzeichenfolgen komprimieren sich bereits extrem gut. Das bedeutet, die Lücke zwischen einem formatierten und einem minifizierten Stylesheet ist, sobald beide durch gzip gelaufen sind, deutlich kleiner, als der unkomprimierte Größenunterschied nahelegt. Minifizieren hilft trotzdem weiter, besonders durch direktes Entfernen von Kommentaren statt sie nur zu komprimieren, aber es lohnt sich zu wissen, dass der Großteil des Netzwerk-Übertragungsvorteils, den moderne Tools versprechen, aus der Komprimierung kommt, und CSS-Minifizierung trägt nur eine kleinere zusätzliche Schicht darüber bei.

Eine Sass- oder Less-Datei zu formatieren bedeutet, konsistente Einrückung und Abstände auf den Quellcode genau so anzuwenden, wie er geschrieben ist — Verschachtelung, Variablen, Mixins und Kontrolldirektiven bleiben in ihrer ursprünglichen Präprozessor-Syntax unangetastet. Das ist eine völlig andere Operation als Kompilieren, was Variablen zu ihren echten Werten auflöst, verschachtelte Selektoren zu unabhängigen flachen CSS-Regeln abflacht, und jedes Mixin ausführt, um seine erweiterte Ausgabe zu erzeugen. Jemand, der kompiliertes CSS aus einer SCSS-Eingabe erwartet, wird überrascht sein, denselben verschachtelten, variablenreichen Quellcode formatiert statt aufgelöst zu sehen — dieses Tool ist ein Formatierer für die Präprozessorsprache, kein Compiler dafür.