The CSS @import at-rule
The CSS @import at-rule pulls another stylesheet into the current one, e.g. @import url("typography.css");. It must appear before any other rules. Use it with care for performance: imported sheets download one after another rather than in parallel, so a <link> in the HTML is usually faster. It can also carry a media query or cascade layer.
Overview
@import lets one stylesheet load another. It is the CSS way to split your styles across files and stitch them back together, and it has to sit at the very top of the file — before any selectors, after only an optional @charset.
The catch is performance. An imported sheet is only discovered once the importing sheet has downloaded and parsed, so imports chain sequentially instead of downloading in parallel. A page that imports three files this way pays for three round-trips in a row. For that reason, multiple <link> tags in the HTML — or bundling your CSS at build time — almost always loads faster.
Where @import still earns its place is its modifiers. It can take a media query, so @import url("print.css") print only loads for printing, and it can import directly into a cascade layer with @import url("framework.css") layer(framework), which is a tidy way to slot third-party CSS into your @layer order.
Syntax
/* must come first, before other rules */
@import url("base.css");
@import url("print.css") print;
@import url("framework.css") layer(framework);Best practices
- Prefer multiple
<link>tags or a build-time bundle over@importfor performance — imports download sequentially. - If you do use it, keep every
@importat the very top of the file or it will be ignored. - Scope an import with a media query, e.g.
@import url("print.css") print, to load it only when needed. - Import third-party CSS into a cascade layer with
layer(name)to control where it sits in your @layer order.
Frequently asked questions
What does @import do in CSS?
@import url("base.css"). It must appear before any other rules.Is @import or link faster?
<link> is usually faster. Imported stylesheets download sequentially, while <link> tags can download in parallel.Why is my @import being ignored?
@import must come before any style rules (only @charset may precede it).Can @import use a media query?
@import url("print.css") print; loads the sheet only for print. It can also import into a cascade layer with layer().