Posts
All the articles I've posted.
Day 25 – Browser Support. What can we use today?
Published: at 07:00 AMA comprehensive overview of browser support for all CSS features covered in this advent calendar. From stable standards to experimental APIs. Find out what you can use in production today.
Door 24 – CSS for Design Systems
Published: at 07:00 AMCSS for design systems is more than styling. It is architecture, governance, and consistent engineering. This door shows how to use CSS strategically and that with tokens, layers, component-oriented structures, and scalable patterns.
Door 23 – CSS Debugging
Published: at 07:00 AMDebugging CSS is often more difficult than writing it. This door shows proven debugging strategies, mental models, and tools that can save a lot of time in large codebases.
Door 22 – CSS Houdini
Published: at 07:00 AMCSS Houdini opens CSS to developers. Paint API, Properties & Values API, Typed OM, and more. This door explains what is possible, where it is already in use, and why Houdini is shaping the future of the CSS engine.
Door 21 – View Transitions API
Published: at 07:00 AMThe View Transitions API enables seamless UI and page transitions without complex SPA frameworks. This door explains how it works, where it makes sense, and how to use it in real-world projects.
Door 20 – Animation Performance
Published: at 07:00 AMCSS animations can enrich interfaces, or ruin performance. This door shows the most important rules for performant animations, best practices, and real examples from modern UI projects.
Door 19 – Transitions and Microinteractions
Published: at 07:00 AMTransitions and microinteractions make interfaces noticeably more understandable. This door shows the most important principles, useful patterns, and typical pitfalls of modern UI animations in CSS.
Door 18 – Theming with CSS
Published: at 07:00 AMTheming without JavaScript – with CSS Custom Properties, color-scheme, Prefers-Color-Scheme, and modern color spaces. This door shows how to implement scalable Light, Dark, and Brand themes purely in CSS.
Door 17 – CSS Color Level 5
Published: at 07:00 AMModern color spaces like OKLCH and new CSS functions like color-mix() enable more precise, accessible, and flexible colors on the web. This door shows why they are so important and how to use them in practice.
Door 16 – Variable Fonts
Published: at 07:00 AMVariable Fonts change how we think about typography on the web. This door shows how they work, why they are more performant, and what creative and systemic possibilities they open up.
Door 15 – Modern Typography in CSS
Published: at 07:00 AMModern web typography goes far beyond font sizes. This door is about fluid scaling, line-height systems, variables, font axes, readability, and building consistent typographic systems.
Door 14 – CSS Cascade Layers
Published: at 07:00 AMCascade Layers bring order to large codebases. This door explains how @layer works, why it prevents specificity conflicts, and how to use layers structurally in professional projects.
Door 13 – CSS Architectures. BEM, ITCSS, CUBE CSS Compared
Published: at 07:00 AMA practical comparison of the most important CSS architecture approaches – BEM, ITCSS, and CUBE CSS – and how they help to make codebases maintainable and scalable in the long term.
Door 12 – State Styling without JavaScript
Published: at 07:00 AMModern CSS selectors like :has(), :checked, or :target enable interactivity without JavaScript. This door shows practical use cases and typical patterns of modern UI components.
Door 11 – CSS Custom Properties
Published: at 07:00 AMCSS Custom Properties are more than just variables. They are a dynamic system resolved at runtime that truly enables modern design systems, theming, and flexible components. A practical introduction.
Door 10 – Modern Responsive Design
Published: at 07:00 AMModern responsive design techniques without hard breakpoints. Fluid scaling, clamp(), modern units, and how to develop a flexible, robust design system.
Door 9 – Container Queries
Published: at 07:00 AMContainer Queries are among the most significant advances in CSS. This door explains how they work, why they fundamentally change responsive design, and how to use them in real codebases.
Door 8 – Advanced Grid Features
Published: at 07:00 AMThe most powerful Grid features explained clearly. minmax(), auto-fit, auto-fill, Auto-Placement, and fr-based logic – with examples from real projects.
Door 7 – Grid Basics
Published: at 07:00 AMA solid introduction to CSS Grid. Why it is a paradigm shift, how tracks work, and which basic patterns one absolutely must understand.
Door 6 – Everyday Flexbox Patterns
Published: at 07:00 AMThe most important Flexbox patterns for everyday use. From perfect centering to Holy Grail layouts to responsive components that behave predictably.
Door 5 – Flexbox Fundamentals
Published: at 07:00 AMTruly understanding Flexbox. The central principles, typical stumbling blocks from real projects, and solid base patterns that every modern UI needs.
Door 4 – Mastering the Box Model
Published: at 07:00 AMWhy every layout starts in the Box Model, how content, padding, border, and margin boxes interact, and what typical problems arise in real projects.
Door 3 – Using Modern Selectors
Published: at 07:00 AMWhy modern CSS selectors like :is(), :where(), and :has() are among the most important tools of modern UI architectures and how they facilitate daily life in real codebases.
Door 2 – Mastering Specificity
Published: at 07:00 AMWhy specificity is one of the most important mechanisms in CSS, how to control it, and how typical problems arise in large codebases – including practical examples.