CSS, das nicht zerfällt: kleine Regeln, große Wirkung

14.06.2025 · 18:37 · Oliver Misch · Kommentieren

CSS zerfällt meistens nicht, weil jemand „kein CSS kann“. Es zerfällt, weil ein Projekt wächst und niemand eine Linie hält. Erst ist es ein kleines Stylesheet, dann kommen ein paar Sonderfälle dazu, dann schnell ein Hotfix für Mobile, dann ein Plugin, das irgendwas überschreibt. Und irgendwann fässt niemand mehr gern an, weil jede Änderung an einer Stelle an einer anderen Stelle etwas kaputt macht.

Die Lösung ist selten ein großer Neustart. Was wirklich hilft, sind kleine Regeln, die man konsequent durchzieht. Nicht als Dogma, sondern als Leitplanken. Damit du in drei Monaten noch weißt, warum etwas so gebaut ist und damit du Änderungen machen kannst, ohne dass dir alles um die Ohren fliegt.

1) Weniger „Sonderfälle“, mehr System

Der typische CSS-Sündenfall sieht so aus: Eine Komponente sieht nicht ganz richtig aus, also bekommt sie einen speziellen Selector, dann noch ein `!important`, dann noch ein Media-Query nur für genau diese Stelle. Das ist kurzfristig effektiv, langfristig pures Gift. Besser ist ein kleines System für Abstände, Größen und Varianten. Du brauchst kein riesiges Design-System. Du brauchst nur Wiederholung.

Ein Beispiel: Wenn du Abstände überall frei setzt, sieht die Seite irgendwann aus wie aus Einzelteilen. Wenn du stattdessen zwei bis vier Abstandsstufen hast, wird alles automatisch ruhiger. Und du musst nicht jedes Mal neu entscheiden, ob es 17px oder 19px sind. Diese „kleinen Entscheidungen“ sind nämlich genau das, was Projekte müde macht.

2) Klassen benennen, als würdest du es später erklären müssen

Naming ist nicht sexy, aber es rettet dir den Alltag. Wenn Klassen „irgendwie passen“, wird es schnell unklar. Du suchst nach einer Stelle und findest fünf ähnliche Klassen, die alle das Gleiche tun, aber leicht anders. Gute Namen sind nicht kreativ, sondern eindeutig. Eine Card heißt Card. Ein Button heißt Button. Varianten sind Varianten, nicht komplett neue Komponenten.

Wichtig ist auch, dass du dich für einen Stil entscheidest. BEM, utility-first, komponentenbasiert, ist alles okay, solange du es konsequent machst. Das Problem ist fast nie der Stil, sondern das Durcheinander aus fünf Stilen.

3) Komponenten denken, nicht Seiten

Viele schreiben CSS seitenweise: „Startseite“, „Unterseite“, „Kontakt“, „Footer“. Das funktioniert bis zum ersten größeren Umbau. Dann willst du einen Block woanders nutzen und merkst, dass er komplett an eine Seite geklebt ist. Stabiler wird es, wenn du in Bausteinen denkst: Header, Navigation, Card, CTA, Table, Footer. Das sind Dinge, die du überall einsetzen kannst, ohne sie neu zu erfinden.

Wenn du Komponenten sauber trennst, brauchst du auch weniger spezifische Selektoren. Du musst nicht `main .content .section .card h2` schreiben. Du gibst der Komponente eine Klasse und steuerst sie direkt. Weniger Verschachtelung heißt weniger Nebenwirkungen.

4) Responsive: nicht „fixen“, sondern planen

Mobile-Probleme entstehen oft, weil Desktop zuerst gebaut wird und Mobile danach „repariert“. Das ist normal, aber es führt schnell zu einem Wald aus Media-Queries. Besser ist es, das Layout grundsätzlich flexibel zu bauen und Media-Queries nur da zu nutzen, wo es wirklich nötig ist. Grid und Flexbox nehmen dir schon viel Arbeit ab, wenn du sie nicht gegen dich arbeiten lässt.

Ein guter Trick ist: Baue deine Komponenten so, dass sie in der Standardbreite (Mobile) sauber sind. Dann erweiterst du nach oben. Das verhindert viele hässliche Sonderfälle und fühlt sich bei neuen Komponenten natürlicher an.

5) Variablen retten dir Konsistenz

CSS-Variablen sind ein einfacher Hebel, um ein Projekt stabiler zu machen. Farben, Schatten, Abstände, Radien, typografische Stufen, all das lässt sich zentral definieren. Du musst damit nicht übertreiben. Schon ein kleines Set aus Grundwerten sorgt dafür, dass du nicht überall neue Werte „reinrätst“. Und wenn du später umbauen willst, bist du froh, nicht 50 Stellen zu suchen.

CSS, das nicht zerfällt, ist kein Kunstwerk. Es ist ein Werkzeug, das ruhig bleibt, wenn du daran arbeitest. Wenn du dich auf wenige Regeln festlegst und sie wirklich durchziehst, wird dein Stylesheet nicht perfekt, aber es bleibt beherrschbar. Genau das ist der Punkt.