CSS: @import

By Xah Lee. Date: 2026-05-29.

2026-05-29

xtodo

Import

ai answer

CSS @import Tutorial

The @import rule in CSS allows you to import rules from another stylesheet into the current stylesheet. It’s a way to modularize your CSS by splitting it across multiple files.

1. Basic Syntax

@import url("styles.css");
@import "styles.css";           /* url() is optional */

Place @import at the very top of your CSS file (before any other rules).
It must come before any declarations or other at-rules (except @charset and @layer in modern browsers).

Example – main.css

@import url("reset.css");
@import url("typography.css");
@import url("components.css");

body {
  background: #f8f9fa;
}

2. Importing from External URLs

You can import stylesheets from other domains (CORS must allow it):

@import url("https://example.com/theme.css");

3. Media Queries with `@import`

You can conditionally import stylesheets based on media features:

/* Import only for screens ≤ 600px */
@import url("mobile.css") screen and (max-width: 600px);

/* Print styles */
@import url("print.css") print;

/* Multiple conditions */
@import url("high-res.css") screen and (min-resolution: 2dppx);

4. Layered Imports (`@layer`) – Modern CSS

Since 2022, you can assign imported styles to cascade layers for better control over specificity:

@import url("framework.css") layer(framework);
@import url("theme.css") layer(theme);

@layer theme {
  /* your overrides here */
}

This is highly recommended for large projects.

5. Full Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Import Demo</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

main.css

@import url("reset.css") layer(reset);
@import url("variables.css") layer(variables);
@import url("components/buttons.css") layer(components);

:root {
  --primary: #0066ff;
}

6. Performance Considerations

Important drawbacks of @import:

It is blocking — the browser must download and parse the imported file before continuing to parse the rest of the CSS.
Multiple @imports create a waterfall of requests, hurting performance.
Not as efficient as using multiple <link> tags in HTML.

Recommendation:

For best performance, use <link> tags in HTML instead of @import:

<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">

Use @import mainly for modular development or when you cannot control the HTML.

7. Best Practices

Practice	Recommendation
File organization	Keep imports at top
Limit depth	Avoid `@import` inside imported files
Use layers	Always prefer `@import ... layer(name)`
Production	Use a build tool (Vite, webpack, Parcel, etc.) to bundle everything
Caching	Use versioned filenames or cache headers
Order matters	Imports are applied in the order they appear

8. Common Pitfalls

Placing @import after rules — ignored by the browser.
Too many imports → slow page loads.
Circular imports (A imports B, B imports A) → unpredictable behavior.
Forgetting url() when needed (though quotes alone work in most cases).
Specificity surprises when mixing imported and local rules.

9. Modern Alternatives (2025+)

CSS Modules (in component frameworks)
CSS-in-JS (styled-components, Emotion)
Build tools that concatenate files (@import gets resolved at build time)
Container Queries + :has() for more dynamic styling without imports
Cascade Layers (@layer) for better organization

Quick Reference Cheat Sheet

/* Basic */
@import "file.css";

/* With media */
@import "mobile.css" (max-width: 600px);

/* With layer */
@import "lib.css" layer(third-party);

/* Multiple in one line (not recommended) */
@import url(a.css), url(b.css);

Pro Tip: In development, @import is convenient. In production, let your bundler handle it.

Would you like a section on how to use @import with Sass/SCSS, Tailwind, or a complete project structure example?