In den meisten Fällen ist es eines von zwei Dingen: ein Tippfehler im Klassennamen — oder ein Wert in der lokalen Klasse, der die Klasse überstimmt.
1. Schreibweise prüfen
Der Name muss exakt stimmen. Häufige Fehler:
| Falsch | Richtig | Fehler |
|---|---|---|
c-btn-primary |
c-btn--primary |
nur ein Bindestrich |
.c-btn--primary |
c-btn--primary |
Punkt am Anfang |
c-btn--Primary |
c-btn--primary |
Großbuchstabe |
c-button--primary |
c-btn--primary |
ausgeschrieben statt btn |
c-btn--accent |
c-btn--primary |
Variante existiert nicht |
Es gibt genau drei Button-Klassen: c-btn--primary, c-btn--secondary, c-btn--link.
2. Lokale Klasse prüfen
Öffne den Reiter Stil und sieh ins Feld Klassen: Ist local pink markiert und trägt Werte, gewinnt sie gegen c-btn--primary. Der farbige Punkt neben jeder Eigenschaft zeigt die Herkunft — pink für lokal, grün für die Global Class. Werte, die zum Problem gehören, zurücksetzen.
Setze alles zurück, was mit Farbe, Rahmen, Rundung, Typografie oder Innenabstand zu tun hat. Diese Einstellungen sind stärker als die Klasse und gewinnen immer.
3. Steht die Klasse am richtigen Element?
Bei Button-Widgets muss die Klasse am Widget stehen, nicht am umgebenden Container. Prüfe im Navigator (Strg+I / Cmd+I), welches Element du markiert hast.
4. Wird eine Grundform allein verwendet?
Steht im Feld nur c-btn, sieht der Button völlig unformatiert aus — wie ein normaler Link. c-btn ist ein interner Baustein ohne eigenes Aussehen. Es muss immer eine Variante sein: c-btn--primary.
Sonderfall: rechteckig statt rund
Buttons haben im Standard eine Pillenform (vollständig gerundete Enden). Sieht dein Button eckig aus, obwohl die Klasse richtig ist, steht meist ein eigener Rahmenradius in der lokalen Klasse — siehe Schritt 2.
Strg+Shift+R / Cmd+Shift+R).