ITCSS ordnet ein Stylesheet nicht nach Dateityp oder Komponente, sondern nach Spezifität und Reichweite jeder Regel. Diese CSS Architektur macht Konflikte zwischen globalen Grundregeln und spezifischen Überschreibungen vorhersagbar, statt sie dem Zufall der Import-Reihenfolge zu überlassen, und bleibt auch bei Dutzenden Entwicklern über Jahre wartbar.
position:sticky ist konzeptuell einfach — in der Praxis versagt es jedoch aus überraschend vielen Gründen. Dieser Artikel erklärt jeden einzelnen Fallstrick: overflow-Fallen im Elternelement, fehlende Schwellenwert-Properties, z-index in Stacking Contexts und warum iOS-Safari sich anders verhält.
Zwei Animationen, die beide transform verwenden, überschreiben sich standardmäßig gegenseitig. animation-composition mit den Werten add und accumulate löst genau dieses Problem und macht es möglich, Hover-Effekt, Scroll-Animation und Idle-Bewegung gleichzeitig auf derselben Eigenschaft laufen zu lassen, ohne dass eine Animation die andere verschluckt.
Wer Layouts mit margin-left, padding-right und border-top schreibt, baut physische Richtungsabhängigkeiten in seinen Code ein, die bei RTL-Sprachen und vertikalen Schreibmodi versagen. CSS Logical Properties lösen dieses Problem fundamental: Ein einziges Stylesheet funktioniert für Arabisch, Hebräisch, Japanisch und Deutsch gleichermaßen.
Von Hand gepflegtes Critical CSS veraltet bei jeder Layout-Änderung sofort und wird zur stillen Fehlerquelle im Frontend. Wer die Critical CSS Extraktion in die Build-Pipeline integriert, bekommt bei jedem Deployment automatisch aktuelles, korrektes CSS für den sichtbaren Bereich, ohne dass ein Entwickler manuell eingreifen muss.
Eine Sticky Checkout Summary klingt nach einer einzigen CSS Zeile, doch position sticky bricht im Checkout regelmäßig an Overflow-Containern, falschen Höhenberechnungen und Stacking-Context-Fallen. Mit dvh Einheiten, einem sauberen Scroll Container und der richtigen Grid-Struktur bleibt die Warenkorb Übersicht zuverlässig sichtbar, während der Nutzer durch die Checkout-Schritte scrollt.
prefers-color-scheme ist mehr als eine Media Query für Dunkel und Hell. Die color-scheme Property, ein sauberer Nutzer-Override und die richtige Reihenfolge beim ersten Render entscheiden darüber, ob Dark Mode nahtlos wirkt oder mit einem sichtbaren Aufblitzen des falschen Themes startet.
Das Holy Grail Layout aus Header, zwei Randspalten, Hauptbereich und Footer galt lange als eines der schwierigsten CSS Probleme überhaupt. Mit CSS Grid, template-areas, Gap und Subgrid lässt sich dasselbe Layout heute in wenigen, klar lesbaren Zeilen bauen, ganz ohne Float-Hacks, ohne Tabellen und ohne fragile absolute Positionierung.
Ein Typografie Skalensystem definiert alle Schriftgrößen eines Projekts über ein festes mathematisches Verhältnis statt über zufällig gewählte Pixelwerte. Kombiniert mit CSS Custom Properties und clamp() entsteht daraus ein einziges System aus semantischen Tokens, das responsive Größen automatisch berechnet und über das gesamte Designsystem konsistent bleibt.
Die View Transitions API bringt das, was früher nur SPAs mit aufwendigen Frameworks erreichten, als native Browser-Funktion: nahtlose Animationen beim Seitenwechsel — mit view-transition-name für shared elements, CSS-Pseudoelementen für volle Stilkontrolle und Cross-Document-Unterstützung für Multi-Page-Apps.