Alles, was an mehr als einer Stelle gleich sein soll, gehört in eine Global Class. Alles, was nur diese eine Stelle betrifft, darf in die lokale Klasse — mit dem Wissen, dass es dort dauerhaft stehen bleibt.
Die Trennlinie
| Global Class (grün) | Lokale Klasse (pink) ist in Ordnung |
|---|---|
| Schriftgröße, -farbe, -schnitt | Ausrichtung genau dieses Containers |
| Abstände, die einem Muster folgen | Reihenfolge der Elemente |
| Hintergrundfarbe einer Fläche | Spaltenzahl eines einzelnen Layouts |
| Rahmen, Rundung, Schatten | Bildausschnitt an dieser Stelle |
| Hover-Farben einer Komponente | ein einmaliger Hover-Effekt an einem Element |
| Sichtbarkeit nach Bildschirmgröße als Muster | ein einmaliges Ausblenden |
Warum diese Grenze
Was an mehreren Stellen vorkommt, soll überall gleich aussehen — das leistet nur eine gemeinsame Definition. Was einmalig ist, gehört an die Stelle, an der es gilt.
Der Unterschied zeigt sich erst später, bei einer Änderung: Eine Global Class ändert man an einer Stelle, und jedes Element zieht mit. Ein Wert in der lokalen Klasse bleibt stehen — er steht in der Rangfolge über der Global Class und gewinnt auch dann noch, wenn die Klasse längst etwas anderes sagt.
Der Zweifelsfall
Stell dir diese Frage: „Soll das an anderer Stelle genauso sein?“
- Ja → Global Class. Gibt es keine passende, fehlt dem System etwas — melde dich.
- Nein, nur hier → lokale Klasse. Notiere dir, dass diese Stelle künftige Systemänderungen nicht mitmacht.
Innenabstände
Ein Sonderfall, der oft Verwirrung macht: Container bringen ein eigenes Padding mit. Setz es nicht per Zahl auf 0, sondern vergib die Klasse u-p--0 und regle den Innenabstand danach über u-p--s bis u-p--5xl.
Grund: Eine eingetippte 0 ist ein Wert in der lokalen Klasse — mit allem, was oben steht. u-p--0 ist eine Klasse und damit im Klassen-Feld sichtbar, austauschbar und übertragbar.