How do you load a third-party stylesheet into its own cascade layer using CSS @import, and where must that rule appear in the file?

## The mechanism CSS you did not author is the main reason cascade layers exist, and `@import` is the hook that lets you assign such a file a layer without editing it: ```css @layer reset, vendor, base, components, utilities; @import url("reset.css") layer(reset); @import url("vendor/datepicker.css") layer(vendor); ``` Every rule inside `datepicker.css` now behaves as though it were written inside `@layer vendor { ... }`. Since `vendor` is ordered near the start, your `components` rules beat it on layer order alone — no specificity escalation, no `!important`, and the vendor file itself is untouched so it can be upgraded freely. This matters specifically because unlayered CSS outranks every layer: a vendor sheet left unlayered would beat your layered components no matter how specific your selectors were. Importing it into an early layer is what puts it back under your control. ## The full syntax The optional pieces come in a fixed order after the URL: ```css @import url("grid.css") layer(vendor) supports(display: grid) screen and (min-width: 40em); ``` - `layer(name)` — a named layer, which can be reopened and ordered explicitly. - `layer` — the bare keyword, creating an anonymous layer that nothing can reference or extend afterwards. Use it only for a file you are certain nobody will need to append to. - `supports(...)` — imports the file only if the condition holds. - A media query — imports only for matching conditions. The URL can also be written as a bare string, `@import "vendor.css" layer(vendor);`. ## Placement rules `@import` rules must come before every other rule in the stylesheet. The only things allowed above them are `@charset` and `@layer` ordering **statements** — the semicolon form that just names layers. This exception is deliberate: it exists precisely so you can fix the layer order before importing anything into those layers. ```css @layer reset, vendor, base, components; /* allowed above @import */ @import url("vendor.css") layer(vendor); .page { margin: 0; } /* any @import after this is ignored */ ``` An `@import` placed after a normal rule is simply dropped, silently, and the file never loads — a failure that looks like "the vendor styles disappeared" rather than a syntax error. An `@import` nested inside a `@layer { ... }` block is invalid for the same reason; you express that with `layer()` on the import instead. ## Strict ordering is not required Because layer order comes from first mention, the imports themselves may appear in any sequence once the ordering statement exists. This is useful with bundlers and with code-split CSS: whichever chunk loads first, the precedence is whatever the statement said. Without the statement, the layer order would follow the import order, and you would be back to caring about build output. ## The cost, stated honestly `@import` inside a stylesheet is discovered only after that stylesheet has been fetched and parsed, so the imported file starts downloading a round trip later than a directly referenced one. On a critical-path stylesheet that is a real delay, and it is the standard argument against building an entire architecture out of `@import`. Two common responses: use `@import ... layer()` only for a handful of third-party files whose loading is not critical, or have the build concatenate the files and wrap each one in `@layer name { ... }` at bundle time, which produces the same cascade result with a single request. Anything beyond that tradeoff is performance-strategy territory. ## What you cannot do from markup There is no widely supported way to attach a layer to a stylesheet referenced directly from the document, so a CSS entry file that imports the vendor sheet is the usual route when you need the layer assignment at runtime rather than at build time. ## Checklist for the answer 1. `@import url("x.css") layer(name);` — layered import. 2. Ordering statement above the imports so precedence is explicit. 3. Imports first in the file; only `@charset` and `@layer` statements may precede them. 4. Optional `supports()` and media query, in that order, after the layer. 5. Mention the serial-fetch cost and the build-time alternative.