# Cascade Layers और Container Queries — CSS Fundamentals: Layout, Flexbox, Grid और Responsive Design

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

> @layer से specificity टकराव नियंत्रित करें और @container से components को उनके container के size के अनुसार style करें।

## @layer

Cascade layers पूरे rules के समूहों का क्रम तय करने देते हैं, इसलिए selector specificity की परवाह किए बिना बाद वाली layer जीतती है।

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

Component viewport के बजाय अपने container के अनुसार ढलता है, इसलिए वही card sidebar या full-width क्षेत्र में काम करता है।

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

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

Page-level layout के लिए media queries और reusable components के लिए container queries उपयोग करें। Third-party CSS को शुरुआती layer में रखें ताकि आपकी styles `!important` के बिना जीतें।