So nutzt du: Klassennamen-Checker
- Gib die URL einer veröffentlichten Seite ein (deine
.webflow.io-Staging-Domain funktioniert) und klicke auf URL prüfen. Du kannst auch HTML, einen einzelnen Abschnitt oder nur eine Liste von Klassennamen einfügen. - Optional kannst du das CSS einfügen, um auch Klassen zu sehen, die im Stylesheet existieren, aber nicht auf der Seite verwendet werden, sowie Klassen ohne Styles.
- Wähle die Namensregeln, gegen die geprüft werden soll: Client-First, BEM oder keine.
- Arbeite die Ergebnisse durch – klicke auf eine Kennzahl, um zur zugehörigen Liste zu springen – und benenne die Klassen im Style Manager von Webflow um oder führe sie zusammen. Bei Bedarf kannst du die vollständige Klassenliste als CSV herunterladen.
Warum Klassennamen durcheinandergeraten
In einem Webflow-Projekt mit mehreren Personen und ein paar Monaten Änderungen zerfallen Klassennamen nach und nach. Jemand tippt hero_heding einmal falsch, Webflow legt bereitwillig eine neue Klasse an, und ab dann nutzt die Hälfte der Überschriften den Tippfehler. Elemente, die aus dem Add-Panel gezogen werden, bekommen automatische Namen wie div-block-12 oder text-block-3. Ein Designer schreibt hero-title, ein anderer hero_title. All das erzeugt zusätzliches CSS, sorgt dafür, dass globale Änderungen Elemente übersehen, und macht den Style Manager schwerer aufzuräumen.
Was der Checker findet
| Prüfung | Beispiel |
|---|---|
| Mögliche Tippfehler (Editierdistanz) | is-secondray neben is-secondary |
| Singular-/Plural-Duplikate | feature-card und feature-cards |
| Gleiche Wörter, andere Trennzeichen oder Groß-/Kleinschreibung | hero-title, hero_title, heroTitle |
| Unbenannte Webflow-Standardnamen | div-block-12, link-block-3, heading-7 |
| Formatierungsprobleme | Großbuchstaben, führende Ziffern, doppelte Trennzeichen, sehr lange Namen |
| Client-First-Regeln | Mehr als ein Unterstrich, is--Klassen als Basisklassen, Kombinationsklassen ohne is- |
| BEM-Regeln | Verschachtelte Elemente wie card__body__title |
| CSS vs. HTML | Klassen im Stylesheet, aber nicht auf der Seite, oder auf der Seite ohne Styles |
Die Tippfehlerprüfung ist so abgestimmt, dass sie keine Fehlalarme auslöst: Nummerierte Reihen (card-1, card-2, heading-style-h2/h3) sowie Größen- oder Zustandsvarianten (margin-small/margin-large, is-active/is-inactive) werden nicht markiert. Wenn zwei Namen sich sehr ähnlich sind, wird die häufiger verwendete Schreibweise als richtige vorgeschlagen.
Eine ganze Webflow-Seite prüfen
Das veröffentlichte CSS einer Webflow-Seite enthält jede gestylte Klasse im Projekt. Eine URL-Prüfung vergleicht die Seite deshalb mit der vollständigen Klassenliste. So lassen sich Tippfehler auch in Klassen finden, die auf anderen Seiten verwendet werden. Beachte, dass „im CSS, aber nicht auf dieser Seite“ nur bedeutet, dass die Klasse auf der geprüften Seite nicht verwendet wird. Prüfe deine wichtigsten Templates, bevor du etwas löschst. Die eigenen w--Klassen von Webflow werden ignoriert.
Probleme in Webflow beheben
- Umbenennen: Wähle ein Element aus, das die Klasse verwendet, und doppelklicke dann im Selector-Feld auf die Klasse. Alle Elemente mit dieser Klasse werden aktualisiert.
- Tippfehler zusammenführen: Wähle die Elemente mit dem Tippfehler aus, entferne ihn und weise die richtige Klasse zu. Lösche anschließend die ungenutzte Klasse mit Style Manager → Clean up.
- Einigt euch auf eine Konvention für neue Abschnitte. Der Class Name Generator erstellt konsistente Client-First- oder BEM-Namen, und HTML & CSS to Webflow fügt programmierte Abschnitte samt ihren Klassen ein.
Vor einem Launch oder einer Übergabe an den Kunden kannst du das mit dem SEO Checker, dem Broken Link Checker und einer README zur Übergabe kombinieren.
Auch gesucht als: css klassen tippfehler, webflow class audit, doppelte css klassen, client-first checker, ungenutzte css klassen, webflow aufräumen, div-block webflow, naming convention linter.
Passende Tools zu: Klassennamen-Checker
- Groß-/Kleinschreibung-Konverter — Füge einen beliebigen Text ein und wandle ihn zwischen 11 Groß-/Kleinschreibungsvarianten um – von „Title Case“ für Überschriften bis hin zu „camelCase“ und „snake_case“ für Code.
- Diff-Checker — Füge die Originalversion und eine geänderte Version ein, um hinzugefügte, entfernte und geänderte Zeilen nebeneinander zu sehen – wobei die genauen Wörter, die sich geändert haben, in jeder Zeile hervorgehoben sind.
- WordPress zu Webflow Weiterleitungen — Beim Umzug einer Seite von WordPress zu Webflow ändert sich fast jede URL: datierte Blog-Pfade, /category/-Archive, Schrägstriche am Ende und Seiten-Slugs.
- Webflow Clipboard Bridge — Webflow legt Elemente in einem speziellen Format in die Zwischenablage, das nicht zwischen Browsern übertragen wird (Firefox → Chrome, Safari → Edge …).