# Cascade Layers & Container Queries — CSS Fundamentals: Layout, Flexbox, Grid and Responsive Design

Source: https://www.geekswithgeeks.com/en/css/css-layers-container

> Control specificity conflicts with @layer and style components by their container size with @container.

## @layer

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

```css
@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.

```css
.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`.