Container Query vs Media Query

Responsive Components

Context-aware vs viewport-based responsive design

Legacy Media Queries

Product Card

This description disappears on small screens

Responds to browser window size

@media (max-width: 600px) {
            .card { flex-direction: column; }
            .description { display: none; }
            }

Limitations:

Only responds to viewport size
Can't adapt to container context
Breaks component encapsulation
Requires global breakpoints

Modern Container Queries Try resizing!

Smart Card

This adapts to its container!

Drag the right edge to resize →

.container {
            container-type: inline-size;
            }

            @container (max-width: 300px) {
            .card { flex-direction: column; }
            .description { display: none; }
            }

Benefits:

Responds to container size
True component-based design
Reusable across contexts
Better component encapsulation

Layout Systems

From float hacks to flexible layouts

Legacy Float Layouts

Item 1

Floated left with margins

Item 2

Complex calculations needed

Item 3

Clearfix required

.item {
            float: left;
            width: 30%;
            margin-right: 5%;
            }
            .item:last-child {
            margin-right: 0;
            }
            .container::after {
            content: "";
            display: table;
            clear: both;
            }

Problems:

Requires clearfix hacks
Complex width calculations
No vertical alignment
Fragile and hard to maintain

Modern Flexbox

Item 1

Flexible and intuitive

Item 2

Equal heights by default

Item 3

Perfect spacing with gap

.container {
            display: flex;
            gap: 1rem;
            }

            .item {
            flex: 1;
            }

Benefits:

Simple and intuitive syntax
Automatic equal heights
Built-in alignment options
Responsive by default

Complex Layouts

From table hacks to powerful grid systems

Legacy Table Layouts

Header 1

Header 2

Header 3

Sidebar Content

Main Content Area

Ad Space

.layout {
            display: table;
            width: 100%;
            }
            .header, .row, .footer {
            display: table-row;
            }
            .cell {
            display: table-cell;
            padding: 1rem;
            vertical-align: top;
            }
            .main-cell {
            width: 60%;
            }
            .footer-cell {
            /* No real colspan in CSS tables */
            }

Problems:

Semantic confusion with tables
Limited layout flexibility
No true spanning capabilities
Difficult responsive behavior
Complex nested structures

Modern CSS Grid

Header 1

Header 2

Header 3

Main Content

Aside

.layout {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto 1fr auto;
            gap: 1rem;
            }

            .footer {
            grid-column: 1 / -1;
            }

Benefits:

Semantic and accessible markup
Powerful spanning capabilities
Intuitive responsive layouts
Perfect alignment control
Clean, maintainable code

Centering Elements

From positioning nightmares to elegant solutions

Legacy Position + Transform

Centered?

.container {
            position: relative;
            }

            .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }

Issues:

Requires position context
Transform affects other properties
Hard to remember syntax
Can cause blurry text

Modern Flexbox Centering

Perfectly Centered!

.container {
            display: flex;
            align-items: center;
            justify-content: center;
            }

Benefits:

Intuitive and readable
Works with any content size
No positioning context needed
Pixel-perfect centering

Dynamic Styling

From build-time variables to runtime CSS custom properties

Legacy Sass Variables

Static Theme

Colors compiled at build time

⚠️ Cannot change themes dynamically

// SCSS
            $primary-color: #6366f1;
            $secondary-color: #f59e0b;
            $border-radius: 8px;

            .button {
            background: $primary-color;
            border-radius: $border-radius;

            &:hover {
            background: darken($primary-color, 10%);
            }
            }

Limitations:

Compiled at build time only
No runtime theme switching
Requires preprocessor setup
Can't respond to user preferences
No dynamic calculations

Modern CSS Custom Properties Try themes!

Dynamic Theme

Colors that change instantly!

/* CSS */
            :root {
            --primary: #6366f1;
            --secondary: #f59e0b;
            --radius: 8px;
            }

            .button {
            background: var(--primary);
            border-radius: var(--radius);
            }

            /* Dynamic theme switching */
            [data-theme="dark"] {
            --primary: #1f2937;
            --secondary: #374151;
            }

Benefits:

Runtime theme switching
No build process required
Responds to user preferences
JavaScript integration
Cascading and inheritance

Animations & Motion

From imperative JavaScript to declarative CSS animations

Legacy JavaScript Animations

JS Box

⚠️ Main thread blocking, poor performance

// JavaScript
            let box = document.getElementById('box');
            let pos = 0;
            let animationId;

            function animate() {
            pos += 2;
            box.style.left = pos + 'px';
            box.style.transform = `rotate(${pos * 2}deg)`;

            if (pos < 200) {
            animationId = requestAnimationFrame(animate);
            }
            }

            button.onclick = () => {
            pos = 0;
            animate();
            };

Problems:

Blocks main JavaScript thread
Poor performance on mobile
Complex state management
Not optimized by browser
Difficult to coordinate timing

Modern CSS Animations Hardware accelerated!

CSS Box

✅ Smooth 60fps, GPU accelerated

/* CSS */
            @keyframes slideAndRotate {
            0% {
            transform: translateX(0) rotate(0deg);
            }
            100% {
            transform: translateX(200px) rotate(360deg);
            }
            }

            .box {
            animation: slideAndRotate 2s ease-in-out;
            }

            .box:hover {
            animation-play-state: paused;
            }

Benefits:

GPU accelerated performance
Runs on compositor thread
Declarative and maintainable
Built-in easing functions
Responsive and accessible

Responsive Typography

From rigid pixel values to fluid, adaptive text systems

Legacy Fixed Pixel Sizing

Fixed Heading

This text uses fixed pixel values and doesn't adapt well to different screen sizes.

Box 1

Box 2

Try resizing this container! →

Fixed sizes regardless of screen

/* CSS */
            .heading {
            font-size: 24px;
            margin-bottom: 16px;
            }

            .text {
            font-size: 16px;
            line-height: 24px;
            margin-left: 20px;
            margin-right: 20px;
            }

            .box {
            padding: 12px 24px;
            margin-bottom: 16px;
            }

Issues:

Poor mobile experience
Not accessible to users who zoom
Rigid across screen sizes
Requires many media queries
No adaptation to user preferences

Modern Fluid Typography & Logical Properties Resize to see!

Fluid Heading

This text uses clamp() for fluid sizing...

Smart Box 1

Smart Box 2

Resize to see fluid scaling! →

Scales smoothly with viewport

/* CSS */
            .heading {
            font-size: clamp(1.5rem, 4vw, 2.5rem);
            margin-block-end: clamp(0.5rem, 2vw, 1rem);
            }

            .text {
            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
            line-height: 1.6;
            margin-inline: clamp(1rem, 3vw, 2rem);
            }

            .box {
            padding-block: clamp(0.75rem, 2vw, 1rem);
            padding-inline: clamp(1rem, 3vw, 1.5rem);
            margin-block-end: clamp(0.5rem, 2vw, 1rem);
            }

Benefits:

Scales perfectly across devices
Respects user zoom preferences
International layout support
Fewer breakpoints needed
Future-proof and accessible