Strukturierte Klassenbenennung in Webflow

In der Welt von Webflow lässt sich der Unterschied zwischen einem Anfänger und einem erfahrenen Entwickler oft in nur einem Wort zusammenfassen: Struktur.

‍

Während nahezu jede Person per Drag-and-Drop Elemente im visuellen Designer von Webflow auf einer Seite platzieren kann, denken Profis bereits einen Schritt weiter. Sie etablieren Systeme, die das Projekt skalierbar und leicht verständlich machen. Und dabei steht Zentrum jedes Systems eine durchdachte Klassenbenennung.

‍

Daher legen wir in diesem Artikel die Grundlagen für effektive Klassennamen, vergleichen bestehende Frameworks aus dem Webdevelopment-Bereich und bringen Ordnung in deine Webflow-Projekte.

Warum die Benennung von Klassen wichtig ist

In Webflow bilden Klassen die Basis, um Elementen spezifische CSS-Eigenschaften zuzuweisen und die fertige Seite optisch zu gestalten. Dafür werden alle Einstellungen des Style-Panels in Code-Snippets umgewandelt und im Hintergrund gespeichert.

‍

Falls ein Element jedoch keine explizite Klasse besitzt und dennoch Eigenschaften im Style-Panel aufweist, generiert Webflow diese automatisch. Dabei folgt die Benennung einem einfachen Schema: Elementname + Index (z. B. „Div 3“, „Heading 5“, „Paragraph 32“). Da diese Klassennamen weder aussagekräftig noch einprägsam sind, versinken viele Projekte schnell ins Chaos.

‍

Um dem entgegenzuwirken, ist eine manuelle und bewusste Klassenbenennung essenziell. Darüber hinaus bietet sie zahlreiche Vorteile:

• Einfache Änderungen: Beschreibende Namen machen den Zweck jedes Elements sofort erkennbar und erleichtern Anpassungen oder Fehlersuchen.
• Globale Verwendung: Klassen können in Webflow seitenübergreifend eingesetzt werden. So lassen sich globale Klassen wie „text-color-blue“  seitenweit wiederverwenden und schaffen Einheit im Design.
• Zusammenarbeit: Sinnvolle Benennungen erleichtern es Kunden und Teammitgliedern, das Projekt zu verstehen und eigenständig Änderungen vorzunehmen, ohne bestehende Layouts zu zerstören.
• Performance: Ohne ein zentrales System steigt mit wachsendem Projekt die Zahl überflüssiger Klassen. Dadurch wird unnötiger Code bei jedem Seitenaufruf geladen, was die Ladegeschwindigkeit negativ beeinflussen kann.

Während diese Effekte auf kleinen Landingpages noch überschaubar bleiben, werden sie bei größeren Projekten zunehmend spürbar. Ein geregeltes Klassensystem ebnet den Weg, problemlos auf 5, 10 oder 50 Unterseiten zu skalieren, ohne Performance oder Einheitlichkeit zu opfern.

Klassennamen: Inspiration aus der Informatik

Bevor wir uns vollständige Frameworks zur Strukturierung von Webseiten anschauen, lohnt sich ein Blick auf grundlegende Konventionen zur Benennung von Variablen in der Informatik.

Snake Case

Beim Snake Case werden einzelne Wörter durch Unterstriche verbunden. So können Elemente einfach beschreibend benannt werden und bleiben auch bei längeren Namen gut lesbar.

‍

Während diese Benennung vor allem in Programmiersprachen wie Python oder Ruby Anwendung findet, lässt sie sich ebenfalls problemlos in CSS übertragen.

‍

Beispiel: primary_button; hero_section; text_wrapper

Camel Case

eim Camel Case werden Wörter ohne jegliche Trennzeichen verbunden, wobei der erste Buchstabe jedes neuen Wortes großgeschrieben wird. Diese Konvention ist vor allem in Java und JavaScript verbreitet und eignet sich ebenfalls für CSS-Klassen.

‍

Jedoch kann die Lesbarkeit vor allem bei längeren Bezeichnungen ein wenig leiden.

‍

Beispiel: primaryButton; heroSection; textWrapper

Kebab Case

Beim Kebab Case werden Wörter mit Bindestrichen verbunden, ähnlich wie beim Snake Case. Da diese Schreibweise konsistent mit CSS-Attributen (z. B. font-weight; border-radius) ist, wird sie von vielen Entwicklern über andere Varianten für Webflow bevorzugt.

‍

Beispiel: primary-button; hero-section; text-wrapper

‍

Da wir nun die Basics zur Benennung von Klassen und Variablen kennen, lernen wir einige durchdachte Frameworks spezifisch für das Development von Webseiten kennen.

Beliebte Frameworks für Webflow-Klassen

Während einfache Konventionen wie Kebab Case die Basis für eine gute Benennung liefern, bieten Frameworks eine übergeordnete Struktur für ein gesamtes Projekt und helfen, Webseiten modular und hierarchisch aufzubauen.

Block-Element-Modifier (BEM)

Bei der BEM-Benennung werden alle Elemente einer Webseite als modulare Blöcke betrachtet und in drei Kategorien eingeteilt:

• Block: Eigenständige Komponente wie ein Button, eine Karte oder ein Slider (z. B. „button“).
• Element: Bestandteil einer Komponente, z. B. der Text in einer Karte oder ein Link im Slider. Der Name kombiniert den Block mit dem Element, getrennt durch zwei Unterstriche (z. B. „button__text“).
• Modifier: Variation eines Elements, um nicht eine komplett neue Komponente erstellen zu müssen. Der Name beschreibt den Zustand und wird mit zwei Bindestrichen angehängt (z. B. „button--large“).

Mit diesem System können Bestandteile sofort ihren Komponenten zugeordnet werden und Style-Konflikte in großen Projekten werden effektiv vermieden. In verschachtelten Layouts können die Namen jedoch recht lang werden, was etwas Einarbeitung erfordert.

Client First

Client-First ist ein von der US-amerikanischen Webflow-Agentur Finsweet entwickeltes System, dass weiterhin aktiv verbessert wird. Der Fokus liegt auf einheitlichen Strukturen zwischen Unterseiten, globalen Klassen und einer zentralen Verwaltung über den Styleguide.

‍

Die Grundprinzipien in kurz:

• Jede Unterseite und Sektion folgt einem einheitlichen Aufbau (z. B. section, padding-global, container).
• Globale Klassen werden seitenweit definiert (z. B. container-large).
• Custom-Klassen sollen beschreibend und funktionsorientiert benannt werden (z. B. faq-list_image-wrapper).
• Elemente sollten maximal 1–2 Kombo-Klassen haben. Deep-Stacking wird vermieden.

Die ausführliche Client-First-Dokumentation inklusive zahlreicher Beispiele findest du auf der verlinkten Webseite.

‍

Da Client-First aus jahrelanger Zusammenarbeit mit Kunden jeder Größe entstanden ist, liefert es einen klaren Leitfaden zur Klassenbenennung. Darüber hinaus berücksichtigt es auch Responsiveness, Barrierefreiheit und Projektstruktur,  und vereinfacht so den gesamten Entwicklungsprozess in Webflow.

Lumos

Lumos ist ein Framework, dass vom Content Creator Timothy Ricks ins Leben gerufen wurde und auf konsistente, skalierbare Webflow-Projekte mit Fokus auf Barrierefreiheit und Responsiveness abzielt.

‍

Lumos im Überblick:

• Custom-Klassen folgen der Snake Case Schreibweise und sollten maximal drei Unterstriche beinhalten. Jedes Element erhält eine Custom Klasse.
• Utility-Klassen beginnen mit dem Präfix “u-” und folgen Kebab Case. Sie werden mit Custom Klassen kombiniert und sind global wiederverwendbar.
• Komponenten-Klasen sind Elemente innerhalb eines Moduls und erhalten den Präfix “c-”
• Combo-Klassen sind Varianten für Komponenten und erhalten den Präfix “is-”.

Weitere Details findest du in der Lumos-Dokumentation.

‍

Im Vergleich zu Client-First beinhaltet Lumos eine starke Philosophie, die Webflow-Komponenten zum vollsten auszunutzen, um Kunden das Erstellen von eigenen Unterseiten und Sektionen so einfach wie möglich zu gestalten.

Die drei Frameworks im Vergleich

{{BasicClass_table="/support/components"}}

‍

Während sowohl BEM als auch Client-First gute Startpunkte für ein organisiertes Projekt sind, hatte ich mich zu Beginn für Client-First entschieden. Die ausführliche Dokumentierung in Kombination mit vielen zusätzlichen Videos gestaltet den initialen Lernprozess einfach, und laden ein, eigene Anpassungen basierend auf deinen Erfahrungen zu machen.

Mein System: Client First ein wenig anders

Nach einer Menge an Kundenaufträgen mit dem nativen Client-First-System, habe ich Stück für Stück meine eigene Erfahrung einfließen lassen und kleine Veränderungen vorgenommen. Dabei sind manche Anpassungen eine Erweiterung der ursprünglichen Philosophie und andere lediglich persönliche Präferenz.

‍

Folgende Änderungen haben sich für mich gelohnt:

• Seitenspezifische Präfixe: Um gleiche Komponenten auf unterschiedlichen Seiten konfliktfrei zu benennen, nutze ich einen Seitenpräfix vor jedem Klassennamen (z. B. h_hero_collection-list).
• Klassenbenennung: Meine Klassen folgen einer Kombination aus Kebab- und Snake Case. Dabei legen Unterstriche einen neuen Komponenten (ähnlich wie bei einem Ordner) fest, während Bindestriche Einzelelemente beschreiben.
• Kombo-Klassen: Variationen werden durch beschreibende Kombo-Klassen mit zwei Bindestrichen dargestellt (z. B. is--blue). Deep-Stacking wird weiterhin vermieden.

Insgesamt soll dir dieser Abschnitt ein wenig Motivation geben, bestehende System oder Frameworks nicht als unveränderlich anzusehen, sondern diese an deinen eigenen Workflow anzupassen. Schließlich kennt keiner deine Arbeitsweise und die Anforderungen deiner Kunden so gut wie du selbst!

‍

Hinweis: Achte bei deinen Veränderungen darauf, die ursprünglichen Vorteile des Systems zu behalten und auf diesen aufzubauen.

Welches System ist das beste?

Die Wahrheit ist, dass es kein universal bestes System für deine Projekte gibt. Während sowohl Client-First als auch BEM für Projekte jeder Größe funktionieren, spielen deine Präferenzen und spezifischen Anforderungen dennoch eine übergeordnete Rolle:

• Wie vertraut bist du mit dem jeweiligen System?
• Handelt es sich um ein Kundenprojekt oder eine persönliche Webseite?
• Wie viele Entwickler oder Teammitglieder arbeiten am Projekt mit?

Je größer und komplexer ein Projekt wird, desto wichtiger ist ein vollständiger Ansatz wie Client-First oder BEM in der Entwicklung.

Meine Empfehlung

Wähle ein etabliertes Framework wie BEM, Client-First oder Lumos und mache dich damit vertraut. Sobald du dich wohl fühlst, kannst du eigene Anpassungen vornehmen oder hybride Systeme entwickeln und in all deinen Projekten verwenden.

‍

Es gibt keinen Nachteil, ein „großes“ System auch für kleine Projekte zu nutzen. Im Gegenteil: Du stellst damit sicher, dass deine Seite skalierbar und übersichtlich bleibt, unabhängig davon, wie sie sich in Zukunft entwickelt.

Fazit

In diesem Artikel haben wir einiges gelernt: Die Wichtigkeit strukturierter Klassennamen, Ansätze aus der Informatik und etablierte Webflow-Frameworks.

‍

Während die Wahl der Methode die Struktur deines Projektes definiert, sollte sie ebenfalls Aspekte wie Kollaboration, Skalierbarkeit und Barrierefreiheit fördern. Dabei musst du nicht davor zurückschrecken, eigene Anpassungen basierend auf deinen Erfahrungen und Projekte zu machen.

‍

Mit diesem Wissen ausgestattet kannst du dich nun für ein System entscheiden, dein erstes Übungsprojekt in Form eines Styleguides oder eines Portfolios erstellen und am eigenen Leib erleben, wie sich deine Webseiten zum besseren wandeln.

Häufig gestellte Fragen