CSS-Tools für Formatierung, Linting und mehr
02.02.2021, 10:01 Uhr
Ein Tool für alle Fälle
Bei der Erstellung von guten Stylesheets helfen die richtigen Werkzeuge.
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.
Jetzt 1 Monat kostenlos testen!
Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.
- + Digitales Kundenkonto,
- + Zugriff auf das digitale Heft,
- + Zugang zum digitalen Heftarchiv,
- + Auf Wunsch: Weekly Newsletter,
- + Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar