@import pulls another stylesheet into the current one, and the imported rules apply as if they were written at that point in the file.
/* Must be at top of stylesheet */
@import url("base.css");
@import url("components.css") screen and (min-width: 768px);
@import "utilities.css" layer(utilities);
/* Regular styles after imports */
.custom {
color: red;
}
The main limitation is speed. The browser only discovers an @import after it downloads and parses the file that contains it, so the files load one after another. Rendering stays blocked until the imported CSS arrives. Separate <link> tags in the HTML download in parallel, so they are better for performance.
The rule must come before every other rule in the file, except @charset and @layer statements, or the browser ignores it. Imports can be conditional on a media query or a supports() condition, and the browser can skip a file whose condition fails. layer() puts the imported rules into a cascade layer.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓