CSS in 2025: Container Queries, :has(), and the Death of Media Queries

CSS in 2025: Container Queries, :has(), and the Death of Media Queries

I used to write 500-line media query spaghetti. Now my CSS is 40% smaller and actually makes sense.

1. Container Queries (Finally!)

Instead of checking the viewport, check the parent:

.blog-grid {
    container-type: inline-size;
    container-name: blog;
}

@container blog (min-width: 600px) {
    .blog-card {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 2rem;
    }
}

Why this matters: My sidebar widgets and main content can now respond to their own width, not the screen size.

2. The :has() Selector (Parent Selector)

This changed everything for form validation and layouts:

/* Style the label when input is invalid */
.field:has(input:invalid) {
    --field-color: var(--error);
}

/* Dark mode toggle without JS class toggling */
html:has(#theme-toggle:checked) {
    color-scheme: dark;
}

/* Card layout depends on content */
.blog-card:has(img) {
    grid-template-rows: 200px 1fr;
}

3. Native Nesting (No Sass Needed)

.nav {
    background: var(--surface);
    
    &__list {
        display: flex;
        gap: 1rem;
    }
    
    &__link {
        color: var(--text);
        
        &:hover {
            color: var(--accent);
        }
        
        &.active {
            font-weight: 700;
        }
    }
}

4. Viewport Units That Actually Work

.hero {
    /* Small viewport units handle mobile browser chrome */
    min-height: 100svh;
    padding: clamp(1rem, 5vw, 3rem);
}

My New Workflow

1. Design tokens in :root

2. Container queries for component responsiveness

3. :has() for state-based styling

4. Grid everywhere (Flexbox only for navbars)

Browser Support?

All of this works in every modern browser as of 2025. If you still support IE11, I'm sorry.

CSS has finally grown up. We don't need preprocessors for logic anymore.