Die kurze Version: keine eigenen Pixel-Werte, Werte in die Global Class statt in die lokale Klasse, eine Komponenten-Klasse pro Element, Klassennamen exakt schreiben.
1. Werte landen in der lokalen Klasse
Was passiert: Solange im Feld Klassen der Eintrag local pink markiert ist, schreibt jede Einstellung dorthin. Die lokale Klasse steht über jeder Global Class und gewinnt dauerhaft — ändert sich die Markenfarbe, zieht dieses eine Element nicht mit. Wiederfinden lässt sich das nur, indem man die Seiten einzeln durchsieht.
Stattdessen: Erst die Klasse im Feld anklicken (sie wird grün), dann einstellen.
2. Eigene Pixel-Werte
Was passiert: Feste Werte bleiben auf dem Handy genauso groß wie am Monitor. Du müsstest sie je Bildschirmgröße einzeln nachstellen — die Werte im System tun das von allein.
Stattdessen: u-mb--, u-p--, u-gap--.
3. Klassen stapeln
Falsch: c-btn c-btn--primary · Richtig: c-btn--primary
Die kurzen Grundformen (c-btn, t-text, t-heading, t-label) bringt die Variante bereits mit. Und zwei Varianten derselben Familie schließen sich aus: Bei c-btn--primary c-btn--secondary entscheidet die Reihenfolge im Klassen-Manager, welche gewinnt — für dich also nicht vorhersehbar.
Die Ausnahme: u--Helfer dürfen zusätzlich stehen, weil jeder nur eine einzelne Eigenschaft setzt.
4. Veraltete oder erfundene Größenkürzel
Es gibt kein sm, md, lg und kein 2xs oder 3xs. Die Skala ist:
xxs · xs · s · m · l · xl · xxl · 3xl · 4xl · 5xl
Ein falsches Kürzel erzeugt keine Fehlermeldung — es passiert einfach nichts.
5. Überschriften-Ebene nach Optik wählen
Was passiert: Eine H4 zu nehmen, weil die Überschrift klein aussehen soll, zerstört die Gliederung für Suchmaschinen und Screenreader.
Stattdessen: Ebene nach Bedeutung, Größe über die Klasse. Beides ist unabhängig — hier erklärt.
6. Klasse an der falschen Ebene
Layout-Klassen (l-) gehören an den Container, Textklassen (t-) an das Element. Prüfen kannst du das in der Struktur-Ansicht.
Die Kurzfassung
| Nicht | Sondern |
|---|---|
Wert bei pinker local-Markierung |
erst Global Class anklicken (grün) |
24px |
u-mb--l |
| Padding von Hand auf 0 | u-p--0 |
c-btn c-btn--primary |
c-btn--primary |
u-mb--md |
u-mb--m |
| H4 weil klein | H2 + t-heading--xs |