Cascade Layers और Container Queries

@layer

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

@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 क्षेत्र में काम करता है।

.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 के बिना जीतें।