Ungenutzte Klassen in Webflow löschen

Wenn du in Webflow arbeitest, kann es passieren, dass du Abschnitte oder Komponenten löschst, aber ihre CSS-Klassen weiterhin in deinem Projekt bestehen bleiben. Diese ungenutzten Klassen blähen dein Stylesheet auf und können die Ladegeschwindigkeit deiner Website negativ beeinflussen. In diesem Tutorial zeigen wir dir, wie du sie sicher entfernen kannst.

Wo kann ich ungenutzte Klassen in Webflow löschen?

Das Entfernen ungenutzter Klassen ist nur im Design-Modus möglich. Weder im Build-Modus noch im Editor-Modus hast du Zugriff auf die notwendigen Funktionen. Stelle also sicher, dass du dich im Design-Modus befindest.

Sobald du dort bist, findest du in der linken Leiste ein kleines Tropfen-Icon. Wenn du darauf klickst, öffnet sich eine Übersicht aller Klassen in deinem Projekt.

Ungenutzte Styles bereinigen

1. Klicke auf das Tropfen-Icon in der linken Leiste.
2. In der Übersicht findest du ein Pinsel-Icon mit der Bezeichnung „Cleanup“.
3. Wenn du darauf klickst, zeigt Webflow dir alle nicht verwendeten Styles an.
4. Mit einem weiteren Klick kannst du sie sicher löschen.

Einzelne ungenutzte Klassen löschen

Falls du gezielt eine einzelne Klasse entfernen möchtest, kannst du das ebenfalls tun:

1. Suche die gewünschte Klasse über das Suchfeld in der Style-Übersicht.
2. Wenn sie nicht mehr in Verwendung ist, erscheint ein Papierkorb-Icon daneben.
3. Klicke auf das Icon, um die Klasse endgültig zu löschen.

Achtung: Falls eine Klasse noch irgendwo in deinem Design genutzt wird, wird das Papierkorb-Icon nicht angezeigt, und die Klasse kann nicht gelöscht werden.

Vorsicht bei Klassen, die von JavaScript genutzt werden

Bevor du alle ungenutzten Klassen löschst, solltest du beachten, dass manche Styles möglicherweise von JavaScript-Code verwendet werden. Beispielsweise kann eine „is-active“-Klasse dynamisch über JavaScript zu Elementen hinzugefügt werden, um sie zu stylen. Wenn diese Klassen nicht direkt in Webflow genutzt werden, aber für Skripte wichtig sind, könnten sie fälschlicherweise als „ungenutzt“ erkannt und gelöscht werden.

Um auf Nummer sicher zu gehen, solltest du vor der Bereinigung deiner Styles ein Backup deiner Webflow-Website erstellen. So kannst du eventuelle Fehler später leicht rückgängig machen.

Fazit

Durch das regelmäßige Löschen ungenutzter Klassen hältst du dein CSS schlank und verhinderst unnötigen Code-Ballast. Folge dieser Anleitung, um deine Webflow-Projekte sauber und performant zu halten! 🚀