1. Was sind CSS-Klassen?
Die Elemente des Baukastens bestehen aus CSS (Cascading Style Sheet) Klassen. CSS-Stylesheet ist, wie der Name schon sagt, in Cascaden (Stufen) aufgebaut.
Beispiel anhand eines Buttons
Stufe 1: Einem Button wird die Klasse >>button<< zugeteilt. Dadurch erhält er den basic Lexware-Style
Stufe 2: Dem obigen Button wird nun zusätzlich die Klasse >>button--primary<< zugeteilt. Dadurch wird er grün.
Stufe 3: Dem obigen Button wird nun nochmal die Klasse >>button--arrow-right<< zugeteilt. Dadurch erhält er einen Pfeil nach rechts.
Wie man in obigen Beispiel gut sehen kann, ist ein grüner Button mit Pfeil nach rechts aus 3 Klassen aufgebaut.
1.1 Welcher Sinn steckt dahinter?
Der Sinn hinter einem stufenweisen Stylesheet ist, dass Elemente der gleichen Art also z.B. alle Buttons auf einer Seite in ihrem grundsätzlichen Aufbau gleich sind (Schrifgröße, Abstände usw) sich aber z.B. in ihrer Hintergrundfarbe unterscheiden können.
Das Gegenteil wäre ein einstufiges Stylesheet - also für jeden einzelnen Button eine eigenen Klasse >>button1<< >>button2<< >>buttonX<< ,die jeweils alle Styles enthalten müsste. Das Ergebnis wäre ein wesentlich längeres Stylesheet und zusätzlich müssten alle Änderung an einem Element der gleichen Art z.B, eine größere Schriftart für alle Button, in allen Button-Klassen geändert werden. Mit einem stufenweisen Stylesheet muss nur die oberste Klasse >>button<< angepasst werden.
2. So benutzt du den Baukasten mit CSS-Klassen
Im Baukasten-Überblick hast du bereits gelesen, wie du Elemente des Baukastens in deine Webflow-Seite einfügst. Damit hast du Grundformen an der Hand. Diese Elemente sind aus vielen Klassen zusammengebaut.
ACHTUNG: Änderst du nun etwas an einem Element, änderst du die Grundform dieses Elements. Fügst du nun ein Element erneut ein, sieht es nicht mehr so aus, wie die Grundform, sondern wie du es verändert hast. Das sollte nicht sein!
Die Lösung:
Die Lösung sind zusätzliche Klassen für jedes Teilelement, das du veränderst.
Zur Unterscheidung von Klassen, die dem Baukasten angehören, nützliche Klassen (sog. Utility-Classes), und Klassen, die projektspezifisch vom Online-Team definiert wurden, markieren wir Klassen mit einem unterschiedlichen Präfix davor. Damit kannst du eindeutig feststellen, ob eine Klasse zum Baukasten gehört oder extra hinzugefügt wird.
2.1 Soll ich CSS-Klassen willkürlich benennen?
Nein solltest du nicht! CSS-Klassen sind wichtig und nützlich. Du solltest sie deshalb so benennen, dass du später auch noch weißt, welchen Style die Klasse mit sich "trägt".
Folgende Regeln sollte man grundsätzlich beachten:
- Klassennamen immer klein schreiben
- Keine Umlaute oder Sonderzeichen benutzen
- Zusätzlich: Versuchen, Klassennamen auf Englisch zu vergeben
Falsch:
Richtig: