Keine eigenen Pixel-Werte. Styles in eine Global Class schreiben, nicht in die lokale Klasse. Eine Komponenten-Klasse pro Element. Diese drei Regeln entscheiden, ob eine spätere Systemänderung deine Seiten mitnimmt oder nicht.
1. Keine eigenen Pixel-Werte
Trage keine festen Werte für Schriftgrößen, Abstände oder Ränder ein — also kein 23px, kein 14px.
Was passiert: Feste Pixel bleiben auf dem Handy genauso groß wie am Monitor. Die Werte im System rechnen sich aus der Bildschirmbreite. Ein selbst eingetippter Abstand von 80 px wirkt am Desktop richtig und sprengt mobil das Layout — und du müsstest ihn je Bildschirmgröße einzeln nachstellen.
Stattdessen: Abstand-Helfer wie u-mb--xl oder u-p--l. Oder, wenn du selbst Klassen baust: eine Variable statt einer Zahl.
2. In die Global Class schreiben, nicht in die lokale
Jedes Element im Atomic Editor hat oben im Feld Klassen immer den Eintrag local stehen — die lokale Klasse. Sie gehört nur diesem einen Element. Alles, was du einstellst, während local aktiv (pink) ist, landet ausschließlich dort.
Was passiert: Die lokale Klasse steht in der Rangfolge über jeder Global Class. Ein Wert dort gewinnt also dauerhaft — auch dann, wenn die Global Class später geändert wird. Wird die Markenfarbe ausgetauscht, zieht die ganze Website mit; die Elemente mit lokal gesetzter Farbe bleiben stehen. Auffindbar sind sie nur, indem man jede Seite einzeln durchgeht.
Stattdessen: Im Feld Klassen die passende Klasse anklicken, sodass sie grün markiert ist — dann bearbeitest du die Global Class. Gibt es keine passende, melde dich: dann fehlt dem System etwas.
3. Eine Komponenten-Klasse pro Element
Schreib c-btn--primary, nicht c-btn c-btn--primary. Die kurzen Grundformen (c-btn, t-text, t-heading) sind interne Bausteine und werden von der Variante bereits mitgebracht.
Die Ausnahme: Helfer-Klassen mit u- regeln jeweils eine einzelne Eigenschaft — Abstand, Breite, Rundung, Schatten, Hintergrund. Sie dürfen zusätzlich stehen:
t-heading--l u-mb--xl — Sektionsüberschrift mit großem Abstand nach unten.
Was du nicht kombinierst: zwei Varianten derselben Familie. c-btn--primary c-btn--secondary ergibt keinen Sinn — welche gewinnt, hängt an der Reihenfolge im Klassen-Manager und ist damit für dich nicht vorhersehbar.
u--Klassen beeinflussen sehr wohl das Aussehen — u-rad--m, u-sh--m, u-bg--muted und u-bd--muted setzen Rundung, Schatten, Hintergrund und Rahmen. Der Unterschied zu c- und t- ist nicht „unsichtbar vs. sichtbar“, sondern: ein Helfer setzt eine Eigenschaft, eine Komponenten-Klasse bringt ein fertiges Erscheinungsbild mit. Deshalb darf man Helfer stapeln und Komponenten nicht.