CSS @import规则详解：样式表导入方法与最佳实践

在网页开发中，合理地组织和引入CSS样式表是构建可维护、高性能网站的关键。@import 规则是CSS提供的一种用于在样式表内部导入其他样式表的方法，是实现CSS模块化的一种方式。找找网本文将详细解析 @import 规则的用法、注意事项以及它与 <link> 标签的区别。

什么是 @import 规则？

@import 是一种CSS at-rule（@规则），它允许您在一个CSS文件中导入并包含另一个CSS文件的全部内容。它的主要目的是帮助开发者将样式表模块化，例如将基础样式、布局样式、组件样式等拆分到不同的文件中，然后通过 @import 在主样式表中统一管理。

@import 的基本语法

@import 规则主要有两种语法形式：

使用字符串直接指定URL： @import "style.css";
使用 url() 函数指定URL：
css @import url("style.css");

这两种语法在功能上是等价的，您可以根据个人喜好选择使用。

代码示例：基础用法

下面是一个简单的HTML文件，它通过 <link> 标签链接了一个主样式表 main.css。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>@import 规则示例 - 找找网</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header class="header">
        <h1>网站标题</h1>
    </header>
    <main class="content">
        <p>这是页面主要内容。</p>
    </main>
</body>
</html>

在 main.css 文件中，我们使用 @import 导入了两个其他的CSS文件：

/* main.css */
/* 导入基础重置样式 */
@import url("reset.css");
/* 导入网站头部样式 */
@import url("header.css");

/* 主样式文件自身的样式 */
.content {
    padding: 20px;
    line-height: 1.6;
}

@import 的关键规则与注意事项

在使用 @import 时，必须遵守一些重要的规则，否则它可能不会生效。

位置规则：@import 规则必须出现在CSS文件或 <style> 标签的最顶端，在所有其他CSS规则（除了 @charset 规则）之前。 代码示例：错误与正确的放置方式 错误示例： <style> .hd { color: orange; /* 这是一个CSS规则 */ } @import "import.css"; /* @import 出现在规则之后，它将失效 */ </style> <p class="hd">这个段落的颜色不会从import.css中加载。</p> 正确示例： <style> @import "import.css"; /* @import 出现在所有规则之前 */ .hd { color: orange; /* 后续的规则可以覆盖导入样式中的规则 */ } </style> <p class="hd">这个段落的颜色将是橘黄色 (orange)。</p> 在错误示例中，浏览器会忽略位置不当的 @import，因此 import.css 文件不会被加载和解析。
与媒体查询结合：@import 支持媒体查询，允许您根据设备类型或特性条件性地导入样式表。** /* 仅在屏幕设备上导入 */ @import url("screen-styles.css") screen; /* 在打印时导入 */ @import url("print-styles.css") print; /* 在视口宽度小于680px时导入 */ @import url('mobile.css') (max-width: 680px);

@import 与 link 的对比

尽管 @import 和 <link> 都可以用来引入外部样式表，但它们在性能、兼容性和控制力方面存在显著差异。下表详细对比了二者的区别：**

特性	`@import` 规则	`<link>` 标签
归属	CSS 提供的 @ 规则	HTML 标签
加载顺序	串行加载。主文件下载解析后，才发现并加载导入的文件，可能导致页面渲染延迟。**	并行加载。与 HTML 文件同时开始下载，不会阻塞页面渲染。
DOM 控制	无法通过 JavaScript DOM API 直接创建或控制。**	可以通过 JavaScript 动态创建和插入。
兼容性	CSS2.1 提出，老版本浏览器（如 IE5 以下）支持不佳。**	所有浏览器都完美支持。
功能单一性	功能单一，仅用于导入 CSS。	功能多样，还可用于定义网站图标 (`rel="icon"`)、预加载资源等。
权重与覆盖	被导入的样式表与主样式表的规则具有相同的层叠性，遵循正常的 CSS 覆盖规则。	与通过 `@import` 引入的样式具有相同的层叠性，遵循正常的 CSS 覆盖规则。

性能深入分析

从性能角度看，@import 可能对页面加载速度产生负面影响。原因是：

阻止并行下载：当浏览器解析一个通过 <link> 引入的CSS文件，并在其中遇到 @import 时，它需要先下载、解析当前文件，然后才知道需要加载下一个文件。这破坏了浏览器本可以并行下载多个资源的能力，导致资源串行加载，延长了整个页面的加载时间。**
打乱加载顺序：在旧版本的IE浏览器中，混合使用 @import 和其他资源（如脚本）可能导致资源加载顺序紊乱，引发意想不到的问题。**

最佳实践与建议

鉴于 @import 存在的性能问题，找找网给出以下最佳实践建议：

优先使用 <link> 标签：在大多数情况下，尤其是在生产环境中，强烈建议使用多个 <link> 标签来引入样式表，而不是使用 @import。这样可以最大限度地利用浏览器的并行下载能力，提升页面加载速度。**  <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="header.css"> <link rel="stylesheet" href="main.css">
在预处理器中使用 @import：像 Sass、Less 这样的 CSS 预处理器也扩展了 @import 功能。在预处理器中使用 @import 是完全没有问题的，因为所有这些导入会在编译阶段被合并、压缩成一个最终的 CSS 文件，不会产生多个 HTTP 请求。**
谨慎使用的场景：如果确实需要根据媒体查询条件性地加载样式，并且希望保持主 HTML 文件的简洁，使用 @import 是一个可以考虑的方案。但对于一般性的样式引入，<link> 仍是更优选择。

本篇教程知识点总结

知识点	知识内容
`@import` 的作用	一种CSS at-rule，用于在一个CSS文件中导入另一个CSS文件，有助于CSS的模块化管理。
`@import` 的语法	两种形式：`@import "style.css";` 或 `@import url("style.css");`。
`@import` 的关键规则	必须置于CSS文件或`<style>`标签的开头，所有其他CSS规则（除`@charset`外）之前，否则会失效。
`@import` 与媒体查询	可以后接媒体查询条件，实现根据设备或特性（如屏幕宽度）条件性地导入样式表。
`@import` 与 `<link>` 的加载差异	`@import` 是串行加载，可能阻塞渲染；`<link>` 是并行加载，有利于页面性能。
`@import` 的缺点	可能阻止并行下载、在旧浏览器中引起加载顺序问题、无法通过DOM直接控制。
最佳实践	生产环境中为追求性能，应优先使用多个`<link>`标签引入CSS；在Sass/Less等预处理器中可安全使用`@import`。

通过本教程，您应该对 CSS @import 规则有了全面深入的了解。在实际项目中，请根据具体需求和性能要求，明智地选择样式表的引入方式。

CSS教程

CSS基础入门

CSS核心样式属性

CSS布局技术

CSS高级特性

CSS功能模块

CSS架构与工程化

CSS琐碎知识归类

CSS实战与最佳实践

@import规则