CSS greift nicht: warum dein Style plötzlich ignoriert wird
Lesedauer: ca. 3 Minuten
Kurz gesagt
Wenn CSS „nicht greift“, ist es fast immer einer von drei Punkten: falscher Pfad, Cache, oder eine andere Regel gewinnt. Geh die Checks in der Reihenfolge durch, dann bist du schnell am Ziel.
1) Prüfe zuerst: wird die CSS-Datei überhaupt geladen
Der wichtigste Schritt ist nicht „nochmal speichern“, sondern zu prüfen, ob der Browser die Datei wirklich abruft. Öffne die Entwicklerwerkzeuge und schau im Netzwerk-Tab nach, ob deine CSS-Datei geladen wird. Wenn dort ein Fehler wie 404 auftaucht, stimmt der Pfad nicht.
Auch häufig: Die Datei wird geladen, aber es ist die falsche Datei. Gerade bei mehreren Ordnern passiert es schnell, dass man an einer Datei arbeitet, die gar nicht eingebunden ist.
2) Cache: der Klassiker
Browser cachen CSS sehr aggressiv. Du siehst dann eine ältere Version, obwohl du längst etwas geändert hast. Ein harter Reload hilft oft. Manche Systeme cachen zusätzlich serverseitig oder über Proxy, dann wirkt es so, als ob der Browser „stur“ ist.
Ein guter Test: hänge eine Versionsnummer an die CSS-Datei. Wenn du sowieso schon so etwas wie ?v1 nutzt, erhöhe sie testweise. Dann ist sicher, dass eine neue Datei geladen wird.
3) Spezifität: eine andere Regel gewinnt
CSS arbeitet nach Regeln: Spezifität und Reihenfolge entscheiden. Eine spätere oder spezifischere Regel überschreibt eine frühere. Wenn du zum Beispiel .btn definierst, aber später gibt es eine Regel wie .header .btn, dann gewinnt die zweite.
Das fühlt sich wie „CSS greift nicht“ an, ist aber eigentlich „CSS greift, wird nur überschrieben“.
4) Reihenfolge: die letzte Regel gewinnt
Wenn zwei Regeln gleich spezifisch sind, gewinnt die, die später kommt. Das gilt auch, wenn du mehrere CSS-Dateien einbindest. Wenn deine eigene Datei vor einer anderen Datei geladen wird, kann sie danach wieder überschrieben werden.
5) Schreibfehler und unsichtbare Fehler
Ein fehlendes Semikolon, eine vergessene Klammer oder ein Tippfehler im Klassennamen reicht. Dann wird die Regel nicht angewendet, oder ein ganzer Block wird vom Browser ignoriert. Besonders fies: Wenn die CSS-Datei sehr groß ist, fällt ein Fehler nicht sofort auf.
6) Falscher Selector oder falsches Element
Manchmal ist die CSS-Regel korrekt, aber sie passt nicht zum HTML. Die Klasse heißt im HTML anders oder liegt an einem anderen Element. Prüfe im Inspektor, ob die Klasse wirklich am Element hängt und ob deine Regel in der Liste der angewendeten Styles auftaucht.
Mini-Checkliste
- Wird die CSS-Datei geladen oder gibt es 404?
- Ist es wirklich die richtige Datei, die du bearbeitest?
- Cache: harter Reload oder Versionsnummer erhöhen
- Wird deine Regel überschrieben (Spezifität/Reihenfolge)?
- HTML passt zum Selector (Klassenname korrekt)?
- Syntaxfehler: fehlende Klammern, Semikolon, Tippfehler
FAQ
Warum sehe ich trotz Änderungen immer das alte Design
In vielen Fällen lädt dein Browser eine alte CSS-Version aus dem Cache. Ein harter Reload hilft oft. Wenn du eine Versionsnummer nutzt, erhöhe sie testweise, damit garantiert neu geladen wird.
Woran erkenne ich, ob eine andere Regel gewinnt
Im Inspektor siehst du, welche Regeln angewendet und welche durchgestrichen sind. Durchgestrichen bedeutet: wurde überschrieben, meist durch Spezifität oder Reihenfolge.
Warum greift CSS lokal, aber online nicht
Typisch sind andere Pfade, andere Dateinamen (Groß und Kleinschreibung) oder ein Server-Cache. Prüfe zuerst, ob die CSS-Datei online wirklich geladen wird und ob es 404 gibt.
Zusammenfassung
Wenn CSS nicht greift, ist es fast nie mystisch. Prüfe zuerst die Einbindung, dann Cache, dann Überschreiben durch andere Regeln. Wenn du das konsequent machst, ist die Ursache meistens schnell gefunden.