Ein Tool für alle Fälle

CSS-Code sollte zuallererst einmal funktionieren, darüber hinaus aber auch gut zu lesen und zu warten sein. Dafür sind mehrere Faktoren wichtig: der Code muss fehlerfrei sein; außerdem hilft es, wenn der Code konsistent ist. Auch muss im Team sichergestellt werden, dass sich alle an bestimmte Entscheidungen (zum Beispiel Wahl der Einheiten) halten. Manche CSS-Angaben müssen zudem für ältere Browser angepasst werden. Speziell beim Einsatz von Frameworks ist es für eine gute Performance zentral, dass nur die Regeln im Stylesheet bleiben, die auch wirklich beim Projekt in Verwendung sind. Für die Performance ist natürlich auch wichtig, die Dateien zu minimieren, d.h. die Dateigrößen durch das intelligente Entfernen von nicht benötigten Leerzeichen und Anderem zu verkleinern. Das sind eine Menge Anforderungen.

Diese gerade aufgeführten Aufgaben lassen sich allerdings mit den richtigen Werkzeuge, die jetzt vorgestellt werden, automatisieren. Die Auswahl der Tools orientiert sich dabei an den Ergebnissen des State of CSS 2020 (Bild 1). Der State of CSS basiert auf Umfragen unter Entwicklern. Unter anderem wurden Entwickler gefragt, welche Tools sie am häufigsten nutzen. Ganz vorn steht StyleLint – 75 Prozent der Befragten nutzen es regelmäßig – gefolgt von PurgeCSS (37,7 Prozent) und PurifyCSS (12,2 Prozent). Als weitere Tools werden Prettier, Autoprefixer und cssnano genannt. Im Artikel erfahren Sie, was die einzelnen Werkzeuge leisten und wann ihr Einsatz sinnvoll ist.