Web & Entwicklung

CSS

CSS bestimmt, wie eine Website aussieht — Farben, Schriften, Abstände, Anordnung. Es ist vom Inhalt getrennt, weshalb sich das Erscheinungsbild ändern lässt, ohne den Text anzufassen.

Redaktionell geprüft von Alexander SeidlertwentyonepixelsStand:

Was diese Trennung wert ist

Ein Farbwechsel im gesamten Auftritt ist eine Änderung an einer Stelle statt an hundert Seiten. Dasselbe gilt für Schriftgrößen, Abstände und die Darstellung auf Mobilgeräten.

Wo diese Trennung aufgeweicht wird — Formatierungen direkt im Inhalt —, wird jede spätere Änderung zur Suchaufgabe. Das ist der Hauptgrund, warum gewachsene Seiten irgendwann „nicht mehr anfassbar" wirken.

Warum Gestaltung heute weniger Aufwand ist

Weil vieles, wofür früher Skripte oder Bilder nötig waren, der Browser mitbringt: Raster, Abstände, Farbräume, Animationen, sogar Behälter-abhängige Anpassung. Ein Bauteil kann sich heute nach dem Platz richten, den es hat, statt nach der Bildschirmbreite.

Für Projekte heißt das konkret weniger Abhängigkeiten. Was der Browser kann, muss nicht gepflegt werden und veraltet nicht.

Woran Stylesheets unwartbar werden

An Spezifitätskämpfen. Wenn eine Regel nur mit `!important` durchkommt, ist die Struktur bereits verloren — und die nächste Regel braucht dann dieselbe Ausnahme. Nach einem Jahr traut sich niemand mehr, etwas zu löschen.

Dagegen hilft eine Konvention, gleich welche, solange sie eingehalten wird. Der häufigste Fehler ist nicht die falsche Konvention, sondern drei verschiedene in derselben Datei.

Der Punkt, an dem es teuer wird

Bei zu vielen Ausnahmen. Wenn jede Seite eigene Sonderregeln bekommt, entsteht ein Geflecht, in dem eine Änderung an drei anderen Stellen etwas kaputt macht.

Dagegen hilft ein festgelegter Satz an Farben, Abständen und Schriftgrößen, aus dem sich alles zusammensetzt — ein Design-System. Es kostet am Anfang Disziplin und spart ab dem zweiten Umbau. Sichtbar wird das auch an der Dateigröße: Diese Website führt 50 KB als Budget für das Stylesheet und liegt bei 26 KB, gemessen am 27.08.2026 an der komprimiert ausgelieferten Größe.

Rechtsgrundlagen

Häufige Fragen zu CSS

Die Kaskade entscheidet, und sie prüft sechs Kriterien in fester Reihenfolge: Herkunft samt Wichtigkeit, Kapselungskontext, direkt am Element notierte Stile, Ebenen, dann erst Spezifität und zuletzt die Stellung in der Datei. So steht es in CSS Cascade Level 5, Abschnitt 6.1. Spezifität ist damit das fünfte von sechs Kriterien – wer bei einem Konflikt nur Selektoren vergleicht, sucht an der falschen Stelle. Die Herkunftsliste kennt acht Stufen, und darin steht ein wichtiges Autoren-Stylesheet unter einer wichtigen Nutzerangabe.

Der Platz für das Bild entsteht erst, wenn die Datei geladen ist – bis dahin rechnet der Browser mit einer Höhe von null, und alles darunter rutscht beim Eintreffen nach unten. Die Attribute width und height im HTML setzen laut HTML-Standard, Abschnitt 15.4.3, die CSS-Eigenschaft aspect-ratio; damit reserviert der Browser die Fläche schon vor dem Laden. Google bewertet solche Sprünge als Cumulative Layout Shift: bis 0,1 im 75. Perzentil gut, über 0,25 schlecht.

Menschen mit vestibulären Störungen – Erkrankungen des Innenohrs und des Gehirns, die Gleichgewicht und Augenbewegungen betreffen – und Menschen, denen Bewegungseffekte Übelkeit verursachen. So begründet es Media Queries Level 5, Abschnitt 12.1. Der Wert reduce meldet diesen Wunsch; auswerten muss ihn die Seite selbst. Verbindlich ist nur ein Teil davon: WCAG 2.2 verlangt auf Stufe A eine Möglichkeit zum Anhalten, wenn Bewegung von allein startet und länger als fünf Sekunden läuft. Bewegung nach einer Interaktion abschaltbar zu machen, steht erst auf Stufe AAA.

Nein. Die Umsortierung wirkt laut CSS Flexible Box Layout Module Level 1, Abschnitt 5.4, ausdrücklich nur auf die visuelle Darstellung; Sprachausgabe und Tastaturnavigation folgen weiter der Quelltextreihenfolge. Dieselbe Spezifikation hält fest, dass Autoren die Umsortierung nicht als Ersatz für eine richtige Quelltextreihenfolge verwenden dürfen, weil das die Barrierefreiheit des Dokuments zerstören kann. WCAG 2.2 fordert auf Stufe A eine programmatisch ermittelbare Reihenfolge. Wer visuell umstellt, muss den Quelltext mitziehen.

Mehr zum Thema

9 Min. Lesezeit

Cookie-Banner-Pflicht: wann er nötig ist und wann nicht

Ein Cookie-Banner ist keine allgemeine Website-Pflicht, sondern die Folge bestimmter Werkzeuge. Welche Einbindungen ihn auslösen, warum „Ablehnen" auf die erste Ebene gehört und wie eine Website ganz ohne Banner auskommt.

9 Min. Lesezeit

Barrierefreie Website: wen die Pflicht trifft — und wen nicht

Das Barrierefreiheitsstärkungsgesetz gilt seit Juni 2025, und seither kursieren zwei falsche Behauptungen: Es gelte für alle Websites, oder es gelte für fast niemanden. Beides stimmt nicht. Wer wirklich betroffen ist, was gefordert wird und warum sich die Umsetzung auch ohne Pflicht rechnet.

Alle Fachbeiträge ansehen

Passende Leistungen

Webdesign & Redesign

Individuelle Websites in Figma entworfen und mit Tailwind CSS sauber umgesetzt — responsiv, schnell und auf Ihre Marke zugeschnitten.

Mehr dazu

Design-System-Entwicklung

Von Design Tokens über Figma-Bibliotheken bis zu Vue-Komponenten in Storybook: ein System, das Design und Code dauerhaft synchron hält.

Mehr dazu

UI/UX Design & Prototyping

Von der User-Journey bis zum klickbaren Prototyp: Interfaces, die Nutzer intuitiv verstehen und die Ihre Conversion-Ziele erreichen.

Mehr dazu

Animationen & Interaktionen

Gezielte Bewegung mit CSS und GSAP, die Aufmerksamkeit lenkt und Marken erlebbar macht — performant und immer mit Rücksicht auf reduzierte Bewegung.

Mehr dazu