Series · 26 parts

Modern CSS Deep Dives

The complete modern CSS path in one series: layout mental models (Flexbox, Grid, subgrid, container queries, fluid design), the cascade, custom properties and color, then animation (transitions, keyframes, easing, performance, accessible and scroll-driven motion), and finally pure-CSS 3D — perspective, preserve-3d objects, tilt and parallax, carousels, lighting and performance.

01 Flexbox vs Grid — The Layout Mental Model Senior Frontend Engineers Actually Need

Flexbox vs Grid mental model for senior engineers: axes, flex shorthand, fr tracks, auto-fit vs auto-fill, intrinsic sizing, and production layout pitfalls.
02 CSS Grid — The Complete Guide to Every Property (with an Interactive Demo)

A complete, practical CSS Grid reference: tracks, the fr unit, minmax & auto-fit, template-areas, alignment, item placement, and every container/item property — with a live interactive demo.
03 Advanced CSS Grid — Subgrid, Masonry, auto-fit vs auto-fill, and Layout Patterns

Senior CSS Grid deep-dive: auto-fit vs auto-fill, subgrid, masonry proposals, dense packing, named areas, alignment — with an interactive demo.
04 CSS Container Queries — Component-Local Responsive Design Beyond Viewport Media Queries

Deep dive into @container, container-type, cqi units, style queries, containment costs, and the gotchas senior engineers hit when replacing media queries.
05 CSS Fluid Responsive Design — clamp(), Viewport Units, Intrinsic Sizing, and the Breakpoint Exit

Senior guide to fluid CSS: clamp() interpolation math, type scales, dvh/svh/lvh, aspect-ratio, intrinsic keywords, zoom a11y, and container units.
06 CSS Cascade, Layers & Specificity — The Full Resolution Order in 2026

How browsers resolve CSS in 2026: origin, @layer, (a,b,c) specificity, :is/:where/:has(), and architecture patterns that end specificity wars.
07 CSS Custom Properties & @property — Runtime Theming, Cascade, and Typed Animation

Senior deep dive: CSS custom properties vs Sass, cascade scoping, fallbacks, JS APIs, semantic theming, IACVT, and @property for gradient animation.
08 Modern CSS Color: OKLCH, color-mix(), and Perceptually Uniform Design Tokens

Why HSL fails for design systems, how OKLCH and color-mix() fix perceptual lightness and palettes, plus P3 gamut, relative colors, and fallbacks.
09 CSS Stacking Contexts and Anchor Positioning: Why z-index 9999 Still Loses

Stacking contexts, paint order, sticky pitfalls, and CSS anchor positioning — the senior guide to z-index scoping and popover layout without JavaScript.
10 CSS @keyframes & the animation Shorthand — A Senior Reference

Master CSS @keyframes and the animation shorthand: longhand properties, fill-mode, direction, iteration, multiple animations, and animation vs transition.
11 CSS Transitions Deep Dive — Interpolation, allow-discrete, and the Gotchas

A senior guide to CSS transitions: the transition model, animatable properties, transition-behavior allow-discrete, transitioning display:none, and pitfalls.
12 CSS Easing Functions — cubic-bezier(), steps(), and linear()

Senior guide to CSS easing: keyword easings, reading cubic-bezier curves, steps() for sprites, and the linear() function for springs and bounces.
13 CSS Animations & Easing — Transitions, Keyframes, Timing Functions, and Motion That Feels Right

Senior guide: transitions, animations, WAAPI, cubic-bezier/steps/linear(), compositor motion, @keyframes, @starting-style exits, and reduced motion.
14 CSS Transforms for Animation — 2D, 3D, and the Compositor Win

Senior guide to animating CSS transforms: translate/scale/rotate, transform-origin, individual transform properties, 3D and perspective, and why transforms are cheap.
15 CSS Animation Performance — The Compositor, will-change, and 60fps

Senior guide to fast CSS animations: the render pipeline, compositor-only properties, will-change tradeoffs, avoiding layout thrash, and DevTools measurement.
16 Animating display and height:auto in CSS — allow-discrete & interpolate-size

Modern CSS finally animates display:none and height:auto. Learn transition-behavior allow-discrete, @starting-style, interpolate-size and calc-size with real examples.
17 Animating CSS Custom Properties with @property — Typed Houdini Variables

Plain CSS variables cannot interpolate. Learn the @property at-rule to register typed custom properties and animate gradient angles, colors, and numbers smoothly.
18 Staggered & Sequenced CSS Animations — Delays, --index, and Choreography

Senior guide to choreographing CSS animations: staggering lists with custom-property delays, nth-child timing, sequencing multiple animations, and negative delays.
19 CSS Entry & Exit Animations with @starting-style

Animate elements as they enter and leave the DOM using @starting-style, transition-behavior allow-discrete, popovers and dialogs — no JavaScript animation library needed.
20 CSS Scroll-Driven Animations — Compositor-Native Scroll UX Without JavaScript (2026)

Deep guide to animation-timeline, scroll() and view() timelines, animation-range, named timelines, performance vs JS listeners, a11y, and @supports fallbacks.
21 Accessible CSS Animation — Designing with prefers-reduced-motion

Senior guide to motion accessibility: the prefers-reduced-motion media query, opt-in vs global reset strategies, replacing motion with fades, matchMedia, and WCAG 2.3.3.
22 CSS 3D from Scratch · Part 1 — Perspective & the Z-axis

The beginner-friendly start to real CSS 3D: the camera mental model, why nothing looks 3D until you add perspective, moving along the Z-axis with translateZ, the three rotation axes, and building your first flip card. With a live demo.
23 CSS 3D from Scratch · Part 2 — preserve-3d & Building Real Objects

Turn flat cards into solid objects: master transform-style: preserve-3d and backface-visibility, understand the local coordinate system, then assemble six faces into a real, rotatable CSS cube — step by step. With a live cube builder demo.
24 CSS 3D from Scratch · Part 3 — Interactive Tilt & Parallax

Make 3D respond to the human: a card that tilts toward the cursor in real time, layered parallax depth with translateZ, a moving glare highlight, and the will-change performance trick. Beginner-friendly, with a live tilt demo.
25 CSS 3D from Scratch · Part 4 — 3D Motion & Carousels

Set 3D objects in motion: pure-CSS keyframe spins, arranging cards in a ring with rotateY and translateZ, building a real 3D carousel with prev/next and auto-rotate, and the idea behind Apple-style coverflow. With a live demo.
26 CSS 3D from Scratch · Part 5 — Lighting, Performance & Accessibility

The production finish for CSS 3D: fake directional lighting so objects look solid, keep animations smooth on the GPU compositor, fix z-fighting, honor prefers-reduced-motion, add fallbacks, and debug 3D when it breaks. With a live demo.