Erst prüfen, ob eine Kombination bestehender Klassen reicht. Wenn nicht: neue Klasse benennen nach dem Muster c-name--variante, ausschließlich mit System-Variablen füllen, dann in Elementor als Global Class anlegen.
Schritt 1 — Prüfen, ob es sie braucht
Die meisten „fehlenden“ Komponenten sind Kombinationen. Ein Hinweiskasten ist ein Container mit u-bg--muted u-p--m u-rad--m. Eine Statistik-Kachel ist c-card mit zwei Textzeilen.
Faustregel: Wenn dasselbe Muster weniger als dreimal vorkommt, ist es keine Komponente — dann bauen es die Helfer-Klassen.
Schritt 2 — Benennen
| Vorsilbe | Wofür |
|---|---|
c- |
Komponente — ein wiedererkennbares Bauteil |
l- |
Layout — ordnet andere Elemente an |
t- |
Typografie — Schrift und Textfarbe |
u- |
Helfer — eine einzelne Eigenschaft |
Varianten mit doppeltem Bindestrich (c-badge--warnung), innere Teile mit doppeltem Unterstrich (c-badge__icon). Namen auf Englisch, klein, mit Bindestrich getrennt.
Schritt 3 — Nur System-Werte verwenden
Die entscheidende Regel: keine festen Werte. Jede Farbe, jeder Abstand, jeder Radius kommt aus einer Variablen.
Falsch wäre padding: 14px und color: #666. Richtig ist padding: var(--space-m) und color: var(--text-secondary). Nur so zieht die neue Komponente bei einer Systemänderung mit — andernfalls ist sie genau die Altlast, die das System vermeiden soll.
Schritt 4 — Vier Zustände mitdenken
Ist die Komponente klickbar, braucht sie alle vier: ruhend, hover, gedrückt, fokussiert. Der Fokus-Ring ist keine Zugabe, sondern Pflicht — siehe Wie Hover-Zustände entstehen.
Schritt 5 — In Elementor anlegen
Neue Klassen entstehen im Atomic Editor als Global Class. Erst dann sind sie im Klassen-Feld verfügbar.
Was nicht als Komponente taugt
- Seitenspezifisches — gilt es nur auf einer Seite, gehört es nicht ins System
- Einzelne Eigenschaften — dafür sind die
u--Helfer da - Inhaltliche Varianten — „Box für Kundenstimme Nr. 3“ ist Inhalt, nicht Struktur