Tutorial: Webflow CLASS NAMING
Effektive Klassennamen in Webflow: Die richtige Strategie für eine übersichtliche und effiziente Webentwicklung.
Beim Ansehen der Videos werden möglicherweise Daten an Youtube übermittelt.
Optimiere dein Webflow Class Naming
Das Erstellen von Klassennamen gehört zu den alltäglichsten Aufgaben im Webdesign, aber manchmal kann es ganz schön schwierig sein, den richtigen Namen zu finden. Stell dir vor, du erstellst eine neue Klasse und starrst auf den blinkenden Cursor, während du darüber nachdenkst, wie du sie beschreibend, aber gleichzeitig nicht zu lang benennen kannst. Die nächste Frage lautet dann: Wann verwendest du einen Bindestrich, einen doppelten Bindestrich oder einen Unterstrich? Ohne es zu merken, leiden wir unter Entscheidungsmüdigkeit, und die ganze Arbeit wird zur Tortur.
Glücklicherweise gibt es Klassennamenskonventionen, die dir helfen können, eine bessere Routine und ein System zu finden. Während es bekannte CSS-Namenskonventionen wie BEM gibt, die jedoch möglicherweise nicht die beste Wahl für Plattformen wie Webflow sind. In diesem Beitrag werde ich dir die Grundlagen guter Klassennamensstrategien erklären und dir zeigen, welches System du verwenden kannst. Also lasst uns eintauchen!
Arten von Klassennamen
Grundsätzlich gibt es drei Arten von Klassennamen, die wichtig sind:
- Elementklassen: Diese Klassen beschreiben ein spezifisches HTML-Element, wie z. B. einen Button oder einen Hero.
- Modifier-Klassen: Diese Klassen ändern eine Elementklasse, wie z.B. is-button-large oder is-nav-scrolled.
- Hilfsklassen: Diese Klassen wenden einen bestimmten Stil an, wie z.B. Hintergrund blau oder Text zentriert.
Diese drei Kategorien sind in den meisten CSS Class Namings zu finden, aber manchmal werden sie anders benannt.
Mein System
Mein System basiert auf Finsweet Client First und nutzt die besten Teile davon. Zunächst verwende ich benutzerdefinierte Klassen, die eigentlich das Gleiche sind wie die Elementklassen für Buttons, Abschnitte, Karten usw. Zum Beispiel wird ein Button so aussehen:
Combo-Klassen
Dann gibt es noch Combo-Klassen, bei denen die Modifier-Klassen zum Einsatz kommen. Sie sehen so aus:
Der Präfix "is" zeigt mir und anderen an, dass es die Elementklasse modifiziert, an die sie angehängt ist. Zum Beispiel ändert die Modifier-Klasse "is-large" die Polsterung und die Schriftgröße eines großen Buttons, während alles andere wie die Farbübergänge und die Rahmenradius von der Elementklasse selbst stammen.
Utility Classes (Globale Hilfsklassen)
Die dritte Art von Klassen sind globale Hilfsklassen wie "Text zentrieren". Du kannst eine globale Klasse an ihrer Struktur erkennen: Sie enthält nur Bindestriche, keine Unterstriche, und beginnt nicht mit dem Präfix "is" wie Modifier-Klassen.
Die wichtigste Regel ist, konsistent zu bleiben. Eine mangelnde Konsistenz wird jedes System brechen.
Fazit
Das perfekte Klassennamenssystem mag zunächst kompliziert erscheinen, aber mit ein wenig Übung und der richtigen Herangehensweise wirst du bald den Dreh raushaben. Bleib einfach konsistent und experimentiere mit verschiedenen Ansätzen, bis du das System findest, das am besten zu deinem Workflow passt. Happy Coding!
