Klassen in Webflow: Benennung & Organisation

Ganz gleich, ob du gerade an einer Webflow Seite für Kunden, oder vielleicht unternehmensintern arbeitest, eine strukturierte Klassenbenennung ist ein Muss.

‍

Warum? Weil ohne eine klar strukturierte Namensgebung sowohl Klienten als auch Teammitglieder große Probleme haben werden, sich in das Projekt einzufinden und selbstständig Änderungen vorzunehmen.

‍

Falls dir die Organisation mit CSS-Klassennamen in Webflow noch etwas schwerfällt, oder du auf der Suche nach neuen Ansätzen bist, könnte dieser Artikel genau das Richtige für dich sein!

Welche Methoden der Benennung gibt es?

Natürlich haben sich mit zunehmender Erfahrung und einer stetig steigenden Anzahl an Programmiersprachen einige Konventionen der Namensgebung herauskristallisiert und durch ihre Vorteile etabliert. Im Folgenden führen wir die bekanntesten Formate der Variablenbenennung aus anderen Programmiersprachen auf:

‍

camelCase

Camel case wird hauptsächlich in Java, JavaScript und C# Code genutzt, um Elemente jeder Art zu benennen. Hierfür werden die Wörter ohne jegliche Trennung verbunden. Mit Ausnahme des ersten Wortes wird der erste Buchstabe eines Wortes immer großgeschrieben um auch längere Namen leichter lesbar zu machen.

‍

Beispiel: teamWrapper; navMenu

‍

An dieser Stelle ist anzumerken, dass Camel Case zunehmend weniger in der Webentwicklung verwendet wird, da es inkonsistent mit der CSS Syntax ist (CSS verwendet Kebab-Case).

‍

Snake_Case

Mit der Snake Case Namensgebung werden die Wörter durch einen Unterstrich getrennt. Obwohl diese Methode, um Variablen, Funktionen und Konstanten zu benennen, hauptsächlich in Programmiersprachen wie Python oder Ruby verwendet wird, bevorzugen ausgewählte Programmierer Snake Case auch für ihren CSS Code.

‍

Beispiel: Container_large; text_size_small

‍

Kebab-Case

Wenn wir Kebab Case für die Benennung unserer Klassen verwenden, trennen wir die individuellen Wörter durch einen Bindestrich, anstatt eines Unterstrichs. Weil diese Namensgebung konsistent mit der von CSS Attributen ist (z.B: font-weight; border-radius), wird sie von vielen Entwicklern über andere Optionen bevorzugt.

‍

Beispiel: Sektion-hero; Button-main

Strukturierung & Benennung: Webdevelopment Frameworks

Klassebenennung mit BEM

BEM ist eine der am weitesten verbreiteten Methoden der CSS-Klassenbenennung und steht für Block, Element, Modifier. Dieser Ansatz bricht die Elemente einer Webseite in kleinere, oft mehrfach genutzte Komponenten herunter, und kann wie folgt aussehen:

Verwirrt? Keine Sorge, wir schauen uns jeden Bereich im Detail an.

‍

Block

Blöcke beschreiben das höchste Level der Unterteilung und werden alleinstehenden Komponenten wie der Navigation, dem Footer, oder der Hero-Sektion zugewiesen.

‍

Wenn wir das Beispiel von vorher betrachten, wäre unser Block “.hero”.

‍

Element

Elemente referenzieren auf die einzelnen HTML-Elemente, die innerhalb des zuvor bestimmten Komponenten liegen. Unser Hero-Komponent beinhaltet drei weitere HTML-Elemente, nämlich die Überschrift, einen Paragraph, und einen Button.

‍

Um die Children-Elemente korrekt zu benennen, fügen wir den HTML-Elementnamen an das Komponenten-Präfix an, und verbinden diese mit zwei Unterstrichen: .hero__heading, .hero__paragraph, .hero__button

‍

Modifier

Fast fertig! Wie man dem Namen bereits entnehmen kann, handelt es sich hier um Variationen eines Elements. Damit wir nicht bei jeder noch so kleinen Änderung ein neuen Komponenten definieren müssen, können wir in Webflow einfach eine Komboklasse mit dem Modifier erstellen. Meistens wählt man hier das Format “.is—eigenschaft”.

‍

Wenn wir also die Überschrift innerhalb unseres Hero-Komponenten auf einer anderen Seite blau färben wollen, fügen wir der .hero__heading Klasse einfach eine .is—blue Komboklasse hinzu.

‍

Um mehr Details zu BEM zu erfahren haben wir dir hier einen Artikel von Webflow verlinkt.

‍

Finsweet Client-First

Letztendlich betrachten wir noch Client-First, das umfassende Webdevelopment-Framework von Finsweet. Neben den konkreten Richtlinien zur Benennung von Klasse werden ebenfalls Vorschläge zum Seitenaufbau selbst nahegelegt, um Projekte möglichst nutzerübergreifend zu gestalten.

‍

Die offizielle Dokumentation schlägt einen Namensaufbau ähnlich BEM vor: Komponent_Benennung

‍

Der Unterschied jedoch liegt im Vorgehen der Namensfindung. Das Ziel von Client-First ist es, Webseiten auch für nicht Technik-affine Personen zugänglich und verwaltbar zu machen.

‍

Daher sollte Klassennamen Kontext über Relationen & Zweck durch eine informative, beschreibende und präzise Benennung vermitteln. Dementsprechend sollte von Abkürzungen und Slang abgesehen werden, da unnötige Verwirrung entstehen kann.

‍

Beispiel: navigation_background-layer, portfolio-grid_image

‍

Für mehr Details zu der Verwendung von Client-First stellt Finsweet eine detaillierte Dokumentation zur Verfügung.

Welche Methode sollte ich verwenden?

Auf diese Frage - wie so oft - gibt es leider keine eindeutige Antwort. Es kommt meistens auf die persönliche Präferenz an, mit welcher Methodik man bereits vertraut ist, oder welche einem am besten gefällt. Dennoch sollte man die Ziele des Projekts nicht aus den Augen verlieren, da e.g. Client-First Vorteile über eine reine Namensgebung hinweg bieten kann:

• Handelt es sich um einen Auftrag oder ein persönliches Projekt?
• Müssen andere Personen an diesem Projekt arbeiten (Mitarbeiter, Klienten)?
• Welches Level an Wissen haben die anderen Personen?

Neues System - was nun?

Nachdem du dich für eine favorisierte Methode der Namensgebung & Strukturierung entschieden hast, heißt es üben! Eine Umstellung kommt immer mit Herausforderungen, z.B. kann es einem oft schwerfallen, die richtigen Namen zu finden, oder einheitlich innerhalb eines Projekts zu bleiben. Deswegen empfehlen wir, dass du zuerst in persönlichen Projekten etwas experimentierst, bevor du dich an ein Kundenprojekt wagst.

‍

In dieser Übungsphase musst du nicht davor zurückschrecken, deine eigenen Anpassungen und Ideen mit in ein bestehendes System einfließen zu lassen, um ein für dich optimierten Workflow zu entwerfen.

‍

In kürze wandeln sich deine Projekte von “Was auch immer das links sein soll” zu einer klaren, verständlichen Struktur:

Zusammenfassung

Die Übersichtlichkeit eines Development-Projekts steht und fällt mit der Klassenbenennung.

‍

Vom universell verwendeten Camel-Case bis hin zur CSS spezifischen BEM Methodik gibt es unzählige Leitfäden, um Ordnung und Struktur in deinen Projekten zu kreieren. Die Auswahl hängt lediglich von persönlicher Präferenz ab, wobei das System mit den Zielen des Projekts harmonieren, und konsequent im Verlauf er Entwicklung verwendet werden sollte.

‍