Archives

Ein tiefgehender Blick auf die CSS-Cascade. Origins, Importance, Spezifität und Reihenfolge und wie sie in realen Projekten über die Stabilität deiner Styles entscheiden.

Warum Spezifität einer der wichtigsten Mechanismen in CSS ist, wie man sie kontrolliert und wie typische Probleme in großen Codebases entstehen.

Warum moderne CSS-Selektoren wie :is(), :where() und :has() zu den wichtigsten Werkzeugen moderner UI-Architekturen gehören und wie sie in realen Codebases den Alltag erleichtern.

Warum jedes Layout im Box-Modell beginnt, wie Content-, Padding-, Border- und Margin-Box zusammenwirken und welche typischen Probleme in realen Projekten entstehen.

Flexbox richtig verstehen. Die zentralen Prinzipien, typische Stolpersteine aus realen Projekten und solide Basis-Patterns, die jede moderne UI braucht.

Die wichtigsten Flexbox-Patterns für den Alltag. Von perfektem Zentrieren über Holy-Grail-Layouts bis zu responsiven Komponenten, die sich vorhersehbar verhalten.

Ein fundierter Einstieg in CSS Grid. Warum es ein Paradigmenwechsel ist, wie Tracks funktionieren und welche Grundmuster man unbedingt verstehen sollte.

Die mächtigsten Grid-Features minmax(), auto-fit, auto-fill, Auto-Placement und fr-basierte Logik verständlich erklärt.

Container Queries gehören zu den bedeutendsten Fortschritten in CSS. Dieses Türchen erklärt, wie sie funktionieren, warum sie responsives Design grundlegend verändern und wie man sie in realen Codebases einsetzt.

Moderne Responsive-Design-Techniken ohne harte Breakpoints, fluides Scaling, clamp(), moderne Einheiten und wie man ein flexibles, robustes Designsystem entwickelt.

CSS Custom Properties sind mehr als nur Variablen. Sie sind ein dynamisches, zur Laufzeit auflösendes System, das moderne Designsysteme, Theming und flexible Komponenten erst wirklich möglich macht.

Moderne CSS-Selektoren wie :has(), :checked oder :target ermöglichen Interaktivität ohne JavaScript. Dieses Türchen zeigt praxisnahe Einsatzmöglichkeiten und typische Pattern moderner UI-Komponenten.

Ein praxisnaher Vergleich der wichtigsten CSS-Architekturansätze – BEM, ITCSS und CUBE CSS – und wie sie dabei helfen, Codebases langfristig wartbar und skalierbar zu machen.

Cascade Layers bringen Ordnung in große Codebases. Dieses Türchen erklärt, wie @layer funktioniert, warum es Spezifitätskonflikte verhindert und wie man Layers in professionellen Projekten strukturiert nutzt.

Moderne Webtypografie geht weit über Schriftgrößen hinaus. In diesem Türchen geht es um fluides Scaling, line-height-Systeme, Variablen, Schriftachsen, Lesbarkeit und den Aufbau konsistenter typografischer Systeme.

Variable Fonts verändern, wie wir Typografie im Web denken. Dieses Türchen zeigt, wie sie funktionieren, warum sie performanter sind und welche kreativen wie systemischen Möglichkeiten sie eröffnen.

Moderne Farbräume wie OKLCH und neue CSS-Funktionen wie color-mix() ermöglichen präzisere, zugänglichere und flexiblere Farben im Web. Dieses Türchen zeigt, warum sie so wichtig sind und wie man sie in der Praxis einsetzt.

Theming ohne JavaScript sondern nur mit CSS Custom Properties, color-scheme, Prefers-Color-Scheme und modernen Farbräumen. Dieses Türchen zeigt, wie man skalierbare Light-, Dark- und Brand-Themes rein in CSS umsetzt.

Transitions und Microinteractions machen Interfaces spürbar verständlicher. Dieses Türchen zeigt die wichtigsten Prinzipien, sinnvolle Patterns und typische Fallstricke moderner UI-Animationen in CSS.

CSS-Animationen können Interfaces bereichern, oder die Performance ruinieren. Dieses Türchen zeigt die wichtigsten Regeln für performante Animationen, Best Practices und reale Beispiele aus modernen UI-Projekten.

Die View Transitions API ermöglicht nahtlose UI- und Page-Transitions ohne komplexe SPA-Frameworks. Dieses Türchen erklärt, wie sie funktioniert, wo sie sinnvoll ist und wie sie im realen Projektumfeld eingesetzt wird.

CSS Houdini öffnet CSS für Entwickler:innen. Paint API, Properties & Values API, Typed OM und mehr. Dieses Türchen erklärt, was möglich ist, wo es schon im Einsatz ist und warum Houdini die Zukunft der CSS-Engine prägt.

CSS zu debuggen ist oft schwieriger als das Schreiben selbst. Dieses Türchen zeigt bewährte Debugging-Strategien, Denkmodelle und Tools, die in großen Codebases jede menge Zeit sparen können.

CSS für Designsysteme ist mehr als Styling. Es ist Architektur, Governance und konsistentes Engineering. Dieses Türchen zeigt, wie man CSS strategisch einsetzt und das mit Tokens, Layern, komponentenorientierten Strukturen und skalierbaren Patterns.

Ein umfassender Überblick über die Browserunterstützung aller in diesem Adventskalender behandelten CSS-Features. Von stabilen Standards bis zu experimentellen APIs. Hier erfährst du, was du heute schon in Production nutzen kannst.