Arten von Klassen
Utility Class (Hilfsklasse)
Eine Hilfsklasse, die mit einer bestimmten Kombination von CSS-Eigenschaften erstellt wird, die global (seitenübergreifend) im gesamten Projekt auf Elemente angewendet werden können.
Alle Utility Classes sind von Natur aus Global Classes (seitenübergreifende Klassen). Eine Utility Class hilft dabei CSS-Eigenschaften innerhalb eines Projekts global und seitenübergreifend anzuwenden.
Im Client-First-Starterprojekt haben wir zum Beispiel die Utility Class background-color-gray hinzugefügt, um häufig verwendete Hintergrundfarben im Projekt zu organisieren und anzuwenden.
Wir haben die Utility Class font-size-large in das Client-First-Starterprojekt aufgenommen, um die einheitliche Größe der Typografie im gesamten Projekt zu organisieren und anzuwenden.
Utility Classes verwenden keinen Unterstrich im Klassennamen.
Custom Class (benutzerdefinierte Klasse)
Eine benutzerdefinierte Klasse, die für eine bestimmte Komponente, Seite, Gruppierung von Elementen oder ein einzelnes Element erstellt wird.
Wir nennen dies eine "Custom" Class, weil sie im Gegensatz zu den Utility Classes unseres Projekts benutzerdefiniert ist. Custom Classes sollten erstellt werden, wenn Utility Classes nicht für ein Element verwendet werden können oder sollen. Die Klasse ist für dieses Element maßgeschneidert.
Zum Beispiel eine Klasse, um ein bestimmtes Element in allen Headern für ein Projekt zu stylen, header_background-layer.
Zum Beispiel eine Klasse, um ein bestimmtes Element im Testimonial-Slider zu stylen: testimonial-slider_headshot.
Im Client-First verwenden Custom Classes einen Unterstrich im Klassennamen.
Global Class (seitenübergreifende Klasse)
Eine Einordnung einer Klasse. Eine Global Class ist für die Verwendung im gesamten Projekt gedacht. Sowohl Utility Classes als auch Custom Classes können Global Classes sein.
Eine Global Class wendet Stile an, die im gesamten Projekt einheitlich bleiben. Eine Global Class ist nicht für eine bestimmte Instanz bestimmt.
"Global" bedeutet seitenübergreifend und überall im Projekt.
Alle Utility Classes sind Global Classes. Utility Classes sind immer global.
Zum Beispiel sind unsere Klassen für Margin und Padding globale Utility Classes. margin-large hat einen Wert von 3rem. Wenn wir diesen Wert auf 4rem aktualisieren, wird jede Instanz, die margin-large verwendet, auf 4rem aktualisiert.
margin-large ist eine Global Class, die den Wert von Margin im gesamten Projekt ändert. Wenn wir Utility Classes richtig einsetzen, können wir unser Projekt wirkungsvoll und seitenübergreifend verändern.
Global Classes sind nicht auf Utility Classes beschränkt. Global Classes sind klar definiert als jede Art von Klasse, die eine seitenübergreifende Verwaltung von Stilen im ganzen Projekt anstrebt.
In Client-First V2 erklären und fördern wir die Verwendung von Custom Classes als Global Classes.
faq_item kann zum Beispiel eine globale Custom Class sein. Wir haben viele FAQ-Sektionen auf der Website, und faq_item wird verwendet, um die FAQ-Elemente im gesamten Projekt zu verwalten.
Auch header_content kann eine globale Custom Class sein. Wir haben eine Header-Komponente auf jeder Seite des Projekts. Diese Klasse verwaltet die Anpassungen für dieses Element seitenübergreifend für das gesamte Projekt.
Combo Class (kombinierte Klasse)
Eine Combo Class ist eine Variante einer Base Class. Eine Combo Class erbt Stile von der Base Class und fügt ihr weitere Stile hinzu.
Wir definieren die Base Class als die erste Klasse in einer Liste gestapelter Combo Classes. Wir fügen eine Klasse über der Base Class hinzu, um eine einzigartige Variante zu erstellen.
Die hinzugefügte Combo Class, die für die einzigartige Variation sorgt, verwendet das Klassenpräfix is-.
Die gestapelte Combo Class funktioniert nur, wenn sie mit der (den) Base Class(es) vor ihr kombiniert wird. In dem Video unten siehst du, dass is-blue nicht alleine funktioniert. Sie funktioniert nur als Zusatz zu der Base Class button.
Combo Classes können aus einer Custom Class oder einer Utility Class erstellt werden. Das Beispiel button is-blue zeigt eine Utility Class als Combo Class.
Wir können auch eine Combo Class für eine Custom Class erstellen. Zum Beispiel: header_content is-home. Dies ist eine Variante der Custom Class header_content.
-is-Präfix
Wir definieren eine Combo Class in Client-First mit dem Präfix is-. Wenn wir is- sehen, wissen wir, dass diese Klasse als Combo Class über einer Base Class erstellt wurde.
Vermeide Deep Stacking (übermäßiges Stapeln von Klassen)
Client-First hat eine universelle Regel: Vermeide Deep Stacking.
Deep Stack (übermäßiger Stapel) – viele Klassen sind auf ein Element "gestapelt".
Deep Stacking (übermäßiges Stapeln) – die Aktion, bei der viele Klassen auf ein Element gestapelt werden.
Der Begriff Deep Stacking wurde von Client-First entwickelt, um die Probleme mit gestapelten Klassen im Webflow Designer zu lösen.
Client-First empfiehlt die Strategie des Deep Stacking in Webflow nicht.
Zum Beispiel:
In Client-First wollen wir das Deep Stacking von Klassen wie dieser vermeiden. Wie man Deep Stacking vermeidet, erfährst du im weiteren Verlauf der Dokumentation.
Hier ist eine kurze Liste mit Gründen:
Gründe, warum wir Deep Stacking vermeiden.
Die Stile im Styles Panel des Designers können nicht neu angeordnet werden.
Wir haben keine freie Steuerung über gestapelte Klassen in Webflow. Wir können sie nicht neu anordnen oder sie im Designer verwalten. Wenn wir Klassen in der gestapelten Liste ändern oder entfernen wollen, müssen wir alle Klassen aus der Liste entfernen, bevor wir auf vorherige Klassen zugreifen können.
Im folgenden Fall kannst du sehen, dass wir einige Klassen entfernen müssen, wenn wir die Textstärke von text-weight-medium in text-weight-bold ändern wollen:
Dieses Problem verschärft sich, wenn wir Änderungen auf kleineren Breakpoints vornehmen. Wir haben noch weniger Steuerung, wenn wir Elemente außerhalb des standardmäßigen (Basis-) Breakpoints bearbeiten.
Langsamerer Arbeitsablauf. Erfordert viele Schritte für kleine Änderungen
Der oben beschriebene Arbeitsablauf ist zeitaufwändig. Wenn dies eine ständige Praxis in unserem Arbeitsablauf ist, wird unsere Erstellungs- und Wartungszeit länger.
Erhöhte Lernkurve
Wir glauben, dass Deep Stacking zu einer steileren Lernkurve führt. Man muss besser verstehen, was die Klassen tun und wie man sie verwaltet.
CSS in Webflow schreiben ist schnell
Das Schreiben von CSS ist mit dem Webflow Styles Panel schnell und effizient. Wir können eine neue Klasse erstellen und der Klasse visuell CSS-Eigenschaften hinzufügen. Dieser Prozess ist in Webflow sehr schnell, und wir nutzen ihn in Client-First. Stylen durch das Stapeln vieler Klassen ist nicht nötig.
Die Einsparung der CSS-Größe ist nicht allzu groß
Wenn wir Global Classes in einem Projekt verwenden, können wir die Größe unserer CSS-Datei reduzieren. Global Classes übermäßig zu stapeln macht aber keinen Sinn. Wir glauben nicht, dass diese kleinen CSS-Einsparungen die Vorteile der benutzerdefinierten Klassenerstellung in Webflow aufwiegen.
Erfahre später mehr über Deep Stacking:
In Klassen-Strategie 2 wird jeder dieser Punkte ausführlich erklärt.
Custom Classes verwenden
Custom Classes sind eine leistungsstarke und empfohlene Methode innerhalb von Client-First.
Wir verwenden Custom Classes für diese Zwecke
- Einfache Änderungen für bestimmte Elemente. Wenn wir ein organisiertes, benutzerdefiniertes Klassensystem verwenden, können wir schnell einzigartige Änderungen an bestimmten Elementen und Komponenten in unserem Projekt vornehmen.
- Um die Verwendung von Utility Classes überall in unserem Projekt zu vermeiden. Utility Classes sind leistungsfähig, sollten aber nicht zum Aufbau des gesamten Projekts verwendet werden. Wenn die Verwendung einer Utility Class unsere Arbeit als Webflow-Entwickler komplizierter macht, empfehlen wir, eine eigene Klasse zu erstellen. Die Verwendung einer Utility Class sollte einen klaren Nutzen haben.
- Um Deep Stacking (übermäßiges Stapeln) zu vermeiden. Übermäßiges Stapeln kann durch eine Custom Class vermieden werden.
Beispiel für eine Hintergrundtextur
Wir wollen zum Beispiel die Hintergrundtextur einer Komponente stylen.
Vielleicht können wir unsere Hintergrundtextur mit drei gestapelten Klassen stylen. Zum Beispiel: background-absolute + fit-size + opacity-low. Kombiniert man diese drei Klassen, erhält man die Stil-Kombination, die wir brauchen.
Anstatt mehrere Klassen für diese Hintergrundtextur zu stapeln, können wir eine eigene Klasse namens services-item_background-texture erstellen. In der Klasse steht eindeutig, dass diese Klasse für "eine Textur, die sich auf einem Hintergrundbild eines ‘Service-Items’ befindet", gedacht ist.
Wir können diese Custom Class jetzt schneller und freier bearbeiten, anstatt die gestapelten Klassen neu zu organisieren. Wenn wir einen besonderen Stil brauchen, haben wir eine Custom Class, die diesen besonderen Stil annehmen kann.
Traditionelle CSS-Entwicklung
Bei der traditionellen CSS-Entwicklung kann eine Lösung mit gestapelten Klassen die bessere Lösung sein. Gestapelte Klassen erfordern weniger CSS, das von Hand geschrieben werden muss, was zu einer schnelleren Entwicklung führt.
Dies ist jedoch keine traditionelle CSS-Entwicklung. Das ist Webflow. Client-First ist eine Sammlung von Prinzipien, die speziell für Webflow entwickelt wurden.
Wir glauben, dass es in Webflow weniger Zeit und Mühe kostet, Stile einer Custom Class für ein Element zu erstellen und zu verwalten, als eine übermäßig gestapelte Klassenliste zu verwalten.
Eine ausführliche Erklärung zur Erstellung von Custom Classes findest du in Klassen-Strategie 2.
Klassenbenennung
Erstelle klare und spezifische Namen für Klassen.
Ein Webflow-Entwickler, ein Kunde oder jeder andere sollte anhand des Klassennamens verstehen, was die Klasse macht, auch wenn er noch nie etwas von Client-First gehört hat.
Mindset benennen
Ziele der Client-First-Klassenbenennung
- Befähige eine technisch nicht versierte Person, unsere Website zu verwalten.
- Sei klar, informativ und beschreibend in unserer Klassenbenennung.
- Gib dem Leser so viel Kontext wie möglich über den Zweck der Klasse.
- Lies einen Klassennamen und erkenne, was sein Zweck ist.
- Keine Abkürzungen, keine Kurzschrift, keine Verwirrung.
- Gib so viel Kontext wie möglich über die Beziehung zwischen dieser Klasse und der Website an.
- Erstelle Namen, die auf Organisationstechniken basieren.
- Verwende Schlüsselwörter, um im Styles Panel nach verfügbaren Klassen suchen zu können.
- Veranschauliche den Zweck einer Klasse anhand ihres Namens.
Fragen, die wir uns bei der Benennung von Klassen stellen sollten
Klassennamen sollten aussagen, was sie tun. Wenn wir einen Namen für eine Klasse erstellen, können wir an diese Fragen denken:
- "Was macht diese Klasse bei dem Projekt?"
- "Was ist der Zweck dieser Klasse im Projekt?"
- "Wie kann ich am verständlichsten erklären, wofür diese Klasse im Projekt zuständig ist?"
Der Name einer Klasse sollte diese Fragen beantworten.
Ein Webflow-Entwickler, -Kunde oder -Vermarkter sollte in der Lage sein, anhand des Klassennamens zu verstehen, was die Klasse macht, auch wenn er noch nie etwas von Client-First gehört hat.
Bedeutungsvolle Namen und Schlüsselwörter
Ein aussagekräftiges Schlüsselwort gibt uns Aufschluss darüber, was diese Klasse/dieses Element tut. Eine möglichst anschauliche Benennung hilft uns, den Überblick zu behalten.
Schlüsselwörter und klare Namensgebung sind übermäßige Kernkonzepte von Client-First. Jeder Klassenname sollte einen sinnvollen Zweck erfüllen. Wir sollten der nächsten Person, die das Projekt betritt, so viel Kontext über den Zweck der Klasse geben.
Schlüsselwörter werden innerhalb eines Klassennamens von allgemein zu spezifisch
Schauen wir uns als Beispiel text-size-large an.
Das allgemeinste Schlüsselwort in diesem Klassennamen ist text. Dieses Wort sagt uns, dass diese Klasse mit einem Textelement zu tun hat.
size sagt uns, dass wir mit der Anpassung der Textgröße arbeiten. Das Wort "size" ist spezifischer, da es sich auf eine bestimmte CSS-Eigenschaft des Textes bezieht – font-size.
Zuletzt haben wir large, das uns genauere Informationen über den Wert der Textgröße gibt. Das ist eine große (“large”) Textgröße.
Beachte, dass wir diese Klasse nicht large-size-text nennen. Auch wenn dies genauso klar ist wie text-size-large, haben wir im Client-First erhebliche Vorteile, wenn wir eine allgemeine bis spezifische Klassenbenennung verwenden. Wir ermöglichen eine intelligentere Klassensuche und eine saubere Organisation der Ordner (Folders). Wir werden in der Dokumentation mehr darüber erfahren.
Schauen wir uns ein Beispiel mit einer Custom Class, team-list_headshot-wrapper, an.
Der Ordnername lautet team-list_, was uns sagt, dass dieses Element etwas mit der Team-Seite oder einer Team-Sektion zu tun hat und eine Liste ist. "Team-Liste" ist der Name der Gruppe, die die spezifischen Elemente enthält.
headshot wird konkreter und sagt uns, dass dieses Element etwas mit dem Headshot in der Team-Liste zu tun hat.
wrapper wird noch genauer und sagt uns, dass dieses Element den Headshot umfasst.
Das Lesen des Klassennamens team-list_headshot-wrapper ist klar und logisch, auch wenn der Benutzer das CSS dahinter nicht versteht. Der Benutzer würde verstehen, dass die Bearbeitung dieser Klasse [etwas] mit den Headshots der Team-Liste macht. Das ist ein hervorragender Hinweis für die nächste Person, die das Projekt betritt.
Stell dir vor, du fügst weitere Elemente innerhalb unseres Headshot Wrappers hinzu. Mit einer Klassenbenennung von allgemein zu spezifisch können wir sehr übersichtlich bleiben.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Unsere Klassenliste für die Team-Liste ist sehr organisiert und logisch in unserem Projekt. Diese Klassenbenennung lässt sich hervorragend in unsere Ordnerfunktion integrieren.