Cascade Layers & Container Queries

@layer

Cascade layers let you order whole groups of rules, so a later layer wins regardless of selector specificity.

@layer reset, base, components, utilities;

@layer base { a { color: blue; } }
@layer components { .nav a { color: black; } }
@layer utilities { .text-red { color: red; } }  /* wins over earlier layers */

Container queries

A component adapts to its container, not the viewport, so the same card works in a sidebar or a full-width area.

.sidebar, .main { container-type: inline-size; }

.card { display: block; }
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: 120px 1fr; }
}

Use media queries for page-level layout and container queries for reusable components. Put third-party CSS in an early layer so your styles win without !important.