- Der Style Manager in Webflow zeigt alle Klassen und Styles deines Projekts, auch solche, die keinem Element mehr zugewiesen sind.
- Ungenutzte Klassen löschst du gesammelt: Style Manager öffnen, „Clean up“ wählen, die markierten Styles prüfen und das Entfernen bestätigen.
- Eine einzelne Klasse suchst du im Style Manager und löschst sie, sobald Webflow bestätigt, dass sie nicht mehr verwendet wird.
- Klassen, die noch auf Elementen liegen, entfernt Webflow nicht. Klassen, die JavaScript, Custom Code, Components oder Integrationen nutzen, solltest du aber zusätzlich von Hand prüfen.
- Leg vor dem Aufräumen eines großen oder produktiven Webflow-Projekts ein Backup an, damit du zur vorherigen Version zurückkannst, falls eine Interaction oder ein Layout kaputtgeht.
- Prüf nach dem Löschen die wichtigsten Seiten, die responsiven Layouts, Components und eigene Interactions und teste die veröffentlichte Website, bevor du das Aufräumen abschließt.
Wichtigste Erkenntnisse
Wenn du in Webflow arbeitest, löschst du manchmal Sections oder Components, aber ihre CSS-Klassen bleiben trotzdem in deinem Projekt bestehen. Diese ungenutzten Klassen blähen dein Stylesheet auf und können sich negativ auf die Ladegeschwindigkeit deiner Seite auswirken. In diesem Tutorial zeigen wir dir, wie du sie sicher entfernst.
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 nötigen Funktionen. Achte also darauf, dass du dich im Design-Modus befindest.
Sobald du dort bist, findest du ein kleines Tropfen-Icon. Ein Klick darauf öffnet eine Übersicht aller Klassen in deinem Projekt.
Wusstest du, dass das Aufräumen von Klassen zu einer sauberen Webflow-Wartung & Pflege gehört, die wir für Kundenprojekte laufend übernehmen?
Ungenutzte Styles aufräumen
- Klick auf das Tropfen-Icon in der linken Leiste.
- In der Übersicht findest du ein Pinsel-Icon namens "Cleanup".
- Wenn du darauf klickst, zeigt dir Webflow alle ungenutzten Styles an.
- Mit einem weiteren Klick kannst du sie sicher löschen.
Einzelne ungenutzte Klassen löschen
Wenn du gezielt eine einzelne Klasse entfernen willst, geht das auch:
- Such die gewünschte Klasse über das Suchfeld in der Style-Übersicht.
- Wenn sie nicht mehr in Nutzung ist, erscheint ein Mülleimer-Icon daneben.
- Klick auf das Icon, um die Klasse dauerhaft zu löschen.
Hinweis: Wenn eine Klasse noch irgendwo in deinem Design genutzt wird, wird das Mülleimer-Icon nicht angezeigt und die Klasse kann nicht gelöscht werden.
Teile diesen Artikel
Artikel zuletzt aktualisiert:
FAQs
Wie lösche ich ungenutzte Klassen in Webflow?
Öffne dein Projekt im Designer, geh zum Style Manager, klick auf Clean up, prüf die ungenutzten Styles und wähle Remove. Du kannst auch gezielt nach einer einzelnen ungenutzten Klasse suchen und sie einzeln löschen.
Warum kann ich eine Klasse in Webflow nicht löschen?
Eine Klasse lässt sich nicht löschen, solange sie noch irgendwo im Projekt auf einem Element liegt. Prüf deine Seiten, CMS-Templates, Components und anderen Layouts auf verbliebene Instanzen, bevor du es erneut versuchst.
Verbessert das Löschen ungenutzter Klassen die Performance in Webflow?
Das Entfernen ungenutzter Klassen hält das Stylesheet des Projekts sauberer und kann unnötiges CSS reduzieren, bringt für sich allein aber meist keinen großen Performance-Gewinn. Für eine spürbar schnellere Website prüf außerdem Bilder, Custom Code, JavaScript, Schriften und Third-Party-Skripte.
Kann das Löschen einer Webflow-Klasse JavaScript kaputt machen?
Ja. Eine Klasse kann von JavaScript, Custom Code oder einer Third-Party-Bibliothek genutzt werden, auch wenn sie in Webflow ungenutzt erscheint. Durchsuch deine Skripte nach dem Klassennamen und teste die zugehörigen Interactions vor und nach dem Löschen.
Sollte ich ein Backup anlegen, bevor ich Webflow-Klassen lösche?
Ja. Erstelle ein manuelles Backup vor dem Aufräumen vieler Klassen oder bevor du an einer produktiven Website arbeitest. Ein Backup gibt dir einen Wiederherstellungspunkt, falls ein Layout, eine Component oder eine eigene Interaction danach nicht mehr funktioniert.
