Helfer-Klassen beginnen mit u- und dürfen als Einzige zusätzlich zu einer Komponenten-Klasse stehen: t-heading--l u-mb--xl.
Warum es eine Ausnahme von der Ein-Klasse-Regel gibt
Eine Komponenten-Klasse (c-) oder Textklasse (t-) bringt ein fertiges Erscheinungsbild mit: Schrift, Farbe, Innenabstand, Rundung, Hover-Verhalten. Zwei davon auf einem Element widersprechen sich zwangsläufig.
Ein Helfer setzt dagegen genau eine Eigenschaft. Zwei Helfer können sich deshalb nicht ins Gehege kommen, solange sie verschiedene Eigenschaften betreffen. Deshalb — und nur deshalb — dürfen sie kombiniert werden:
t-text--m t-color--muted u-w--m u-mb--l
u- ändert nicht das Aussehen.“ Das stimmt nicht — u-rad--m setzt eine Rundung, u-sh--m einen Schatten, u-bg--muted eine Hintergrundfarbe. Das sind sichtbare Gestaltungsentscheidungen. Der Unterschied liegt im Umfang: eine Eigenschaft statt eines kompletten Erscheinungsbilds.Die Gruppen
| Vorsilbe | Setzt | Beispiel |
|---|---|---|
u-mb-- |
Abstand nach unten | u-mb--l |
u-p-- |
Innenabstand (auch u-p--0) |
u-p--m |
u-gap-- |
Lücke zwischen Kindelementen | u-gap--s |
u-w-- |
maximale Breite | u-w--m |
u-bg-- |
Hintergrundfarbe | u-bg--muted |
u-bd-- |
Rahmen | u-bd--muted |
u-rad-- |
Eckenrundung | u-rad--m |
u-sh-- |
Schatten | u-sh--m |
u-hide-- |
Sichtbarkeit je Bildschirmgröße | u-hide--mobile |
Die Größen folgen derselben Skala: xxs · xs · s · m · l · xl · xxl · 3xl · 4xl · 5xl. u-rad-- und u-sh-- haben nur einen Teil davon — siehe Klassen-Übersicht.
gap oder mb — was wann?
Das ist die häufigste Unsicherheit.
u-gap--am Container, wenn mehrere Kindelemente gleichmäßige Abstände brauchen. Ein Wert, gilt für alle. Das ist der Normalfall.u-mb--am einzelnen Element, wenn nur an einer Stelle mehr Luft nötig ist — etwa zwischen Überschrift und Textblock.
Faustregel: erst u-gap-- am Container versuchen. Wenn du an fünf Elementen einzeln u-mb-- setzt, gehört stattdessen ein gap an den Container.
Voraussetzung: u-gap-- wirkt nur, wenn der Container auf Flex oder Grid steht. Bei einem Div-Block passiert nichts, bis du das umstellst — hier erklärt.
Hintergrundflächen
u-bg--muted gibt einem Abschnitt einen dezent abgesetzten Hintergrund. Das ist das übliche Mittel, um Abschnitte optisch zu trennen — abwechselnd weiß und leicht getönt.
Setze es am Sektions-Container, nicht am inneren Container. Sonst endet die Fläche an der Inhaltsbreite und wirkt wie ein Kasten in der Seitenmitte.