Seite 13 - CSS

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.

Wenn eine Utility-Klasse im Markup steht, aber im Browser einfach nicht ankommt, liegt das selten an Tailwind selbst. Tailwind Klassenkonflikte entstehen fast immer durch Cascade-Reihenfolge, Spezifität von Drittanbieter-CSS oder überlappende Varianten, und lassen sich mit einem systematischen Debugging-Workflow zuverlässig auflösen.

Die klassische Style-API von JavaScript kennt nur Strings: style.width liefert "320px" zurück, egal ob es sich um eine Länge, einen Winkel oder eine reine Zahl handelt, und jede Rechnung damit beginnt mit Parsing und endet mit erneutem String-Zusammenbauen. Die CSS Typed OM ersetzt das durch echte, typisierte Objekte, die sich direkt addieren, multiplizieren und in andere Einheiten umrechnen lassen, ohne den Umweg über Text.

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.

E-Mail-Clients rendern kein modernes CSS, Outlook nutzt teilweise die Word-Rendering-Engine, und Flexbox oder Grid funktionieren dort schlicht nicht zuverlässig. Wer Tailwind-Utility-Klassen konsequent auf Tabellen-Layout überträgt, kann trotzdem konsistente, wartbare HTML-E-Mail-Templates bauen, ohne bei jedem Newsletter von vorne anzufangen.

Badges, die über eine Ecke ragen, Bildstapel mit Tiefeneffekt und versetzte Karten wirken erst dann hochwertig, wenn negative Margins, Inset-Utilities und Transform-Utilities gezielt zusammenspielen. Wer versteht, wie diese drei Werkzeuge sich unterscheiden und wo Stacking-Contexts zu unerwarteten Überlappungen führen, baut Overlap-Layouts, die auch bei responsiven Größenänderungen stabil bleiben.

Container Query Units skalieren Schriftgrößen und Abstände relativ zur Breite oder Höhe des umgebenden Containers, nicht relativ zum Browserfenster. Damit verhält sich eine Card-Komponente in einer schmalen Sidebar automatisch anders als dieselbe Card im breiten Hauptbereich, ganz ohne zusätzliche Klassen oder JavaScript.

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.