Viele Content Management Systeme bringen sie voreingestellt mit und sie sollen ein Teil der Arbeit von Webentwicklern abnehmen. Die Rede ist von CSS-Dateien und darin enthaltenen zahllose Selektoren, die meist nie verwendet werden. Auch bei gänzlich selbst erstellten CSS-Dateien kommen mit der Zeit immer mehr Anweisungen hinzu, was nicht zuletzt auch der Weiterentwicklungen von Webbrowsern geschuldet ist. Der anfangs sauber strukturierte Aufbau kann dadurch mit der Zeit abhandenkommen. Auch aufgrund der Mitarbeit von mehreren Personen an einem Projekt werden CSS-Dateien schnell unübersichtlich. Mit der Zeit sammeln sich immer mehr Selektoren an, die u.U. redundant sind oder durch Anpassungen nicht mehr genutzt werden. Für Webentwickler sind sie dadurch schwerer zu handhaben. Weiterhin kann sich dies auf das Ladeverhalten der Webseite auswirken. Früher oder später müssen die vorhandenen CSS-Dateien aufgeräumt werden – wie das am effektivsten geht erfahrt ihr hier.
Abb. 01: CSS säubern in 5 Schritten – mit Dust-Me
Was ist CSS?
Im Bereich der Webentwicklung sollte das Credo sein, Inhalte und Design zu trennen. Genau das tut man u.a. mit CSS, den Cascading Style Sheets. Während im HTML die Inhalte platziert und ausgezeichnet werden, legt man im CSS fest welches Aussehen sie bekommen oder in welcher Reihenfolge sie wo angezeigt werden. Das kann im HTML selbst erfolgen oder über externe Dateien, die im HTML-head Bereich eingebunden werden. Aus SEO-Gesichtspunkten und aufgrund einer schlanken HTML-Struktur sind externe Dateien, die per link-Tag eingebunden werden, vorzuziehen.
Wie kann man saubere CSS-Dateien erhalten?
Mitunter kann es eine sehr komplexe Herausforderung darstellen, alle genutzten CSS-Dateien auf nicht vorhandene Elemente zu prüfen. Ein Grund weshalb man mit einer manuellen Auswertung schnell an Grenzen stößt: Auf unterschiedlichen Seitentypen kommen jeweils andere Style-Elemente zum Einsatz. Wie so oft schafft auch hier ein Tool Abhilfe; es heißt „Dust-Me“.
Das Firefox-Plugin Dust-Me findet ungenutztes CSS
Mit dem Firefox Plugin Dust-Me werden automatisch nicht verwendete CSS-Elemente identifiziert und ausgewertet. Das Plugin analysiert dazu jede per link-Tag eingebundene CSS-Datei und vergleicht die enthaltenen Selektoren. Auf den unterschiedlichen Seitentypen werden nicht immer die gleichen CSS-Elemente oder CSS-Dateien genutzt. Deshalb kann man eine erweiterte Funktion von Dust-Me nutzen und eine XML-Sitemap als Crawling-Vorlage verwenden.
Eine XML-Sitemap zur Unterstützung nutzen
Als Crawling-Grundlage für Suchmaschinen stellt jeder gute Webmaster XML-Sitemaps bereit. Falls nicht, ist das ein Grund sie jetzt anzulegen und jede erreichbare URL zu hinterlegen. Anhand dieser Sitemap crawlt Dust-Me jede aufgeführte URL, ruft die verwendeten CSS-Dateien ab und vergleicht die Selektoren automatisch miteinander.
CSS-Dateien automatisch auf ungenutzte Elemente prüfen – So geht’s
1. Dust-Me für Firefox herunterladen
Abb 02: Das Firefox Plugin Dust-Me hilft ungenutztes CSS zu identifizieren
2. In der AddOn-Leiste sichtbar machen (falls inaktiv)
Abb. 03: Um die erweiterte Funktion zu nutzen muss die Firefox AddOn-Leiste angezeigt werden
3. XML-Sitemap auf dem Server zur Verfügung stellen…
Abb. 04: XML-Sitemap spidern auswählen
4. …URL in Dust-Me eingeben und spidern lassen
Abb.05: Sitemap-URL eingeben und losspidern lassen
5. Ergebnis herunterladen und ungenutzte CSS-Selektoren aus den Stylesheets entfernen
Abb. 06: Die Übersicht der ungenutzten CSS-Selektoren zum herunterladen
Aufschrei der Webentwickler
Daten die zur Darstellung der Webseite dienen einfach löschen? Was, wenn das Tool unsauber arbeitet und falsche Daten liefert? Natürlich kann man eine falsche Datenermittlung durch Dust-Me nicht ausschließen. Wer allerdings eine sauber aufgesetzte Testumgebung betreibt und diese auch zu nutzen weiß, kann bereits vor dem Livegang Fehler ausschließen.
Eine andere Ausrede, um keine Änderungen vorzunehmen ist häufig auch: Was wenn die die Styles doch irgendwann mal gebraucht werden? Ganz ehrlich, solche Menschen haben noch nicht erkannt wie der Hase läuft. Wenn diese CSS-Anweisungen irgendwann mal gebraucht werden, werden sie sowieso irgendwann bearbeitet und können an diesem „irgendwann“ auch so implementiert werden.
Gibt es Alternativen zu Dust-Me?
Dust-Me kann derzeit nur für den Firefox verwendet werden. In CSS werden häufig aber auch Angaben für bestimmte Browser hinterlegt, weshalb nicht alle gefundenen Elemente blind gelöscht werden sollten. Als Alternative bietet sich das von geuis entwickelte Tool Helium an. Helium ist eine JavaScript-Integration zur Erkennung von nicht verwendetem CSS. Es wurde in Chrome entwickelt und kann nach derzeitigem Stand in Chrome, Firefox und Safari genutzt werden. Hier ist jedoch Entwickler-Aufwand nötig, da die Ausgabe der ungenutzten CSS-Selektoren auf der Seite selbst geschieht und Helium somit nur auf Testumgebungen angewendet werden sollte.
Und ihr so?
Mir sind keine weiteren Tools bekannt, die ungenutztes CSS in dieser Weise automatisiert erkennen. Mich würde deshalb interessieren, ob ihr schon einmal CSS-Dateien aufgeräumt habt und wie ihr dabei vorgegangen seid. Kam eines der genannten Hilfsmittel zum Einsatz oder seid ihr ganz anders vorgegangen? Zwar kann man mit JavaScript Integrationen, wie UnCSS, arbeiten, das bedeutet allerdings Entwicklungungsaufwand. Ich freue mich auf regen Erfahrungsaustausch!
Kommentar?