在CSS文件中使用@import引入其他样式表是一种常见的模块化管理手段，但它的实际加载行为往往被误解。很多人以为@import和link标签一样会在页面加载时并行请求资源，其实@import的加载时机与位置密切相关，尤其在结合媒体查询后，可以精确控制样式表的下载条件，实现按需加载的效果。
理解@import的延迟加载机制，有助于我们在项目中避免不必要的性能损耗。本文将深入解析@import的语法规则、加载时序、媒体查询的应用方式以及最佳实践，帮助开发者用更合理的方式组织样式资源。
@import的基本语法与加载行为解析
@import规则必须出现在样式表的顶部，除了@charset规则外，它必须位于所有其他规则之前。基本语法如下：
/* 在style.css顶部引入另一个样式表 */
@import url("reset.css");
/* 或者使用字符串形式 */
@import "base.css";
/* 可以同时引入多个 */
@import "layout.css";
@import "theme.css";
从加载时序上看，浏览器遇到HTML文档中的link标签加载外部CSS时，会先下载并解析该CSS文件。如果这个CSS文件中包含@import，浏览器会暂停当前CSS的解析，发起新的请求去获取被导入的样式表，待其下载完成后再继续解析后续规则。这意味着@import引入的样式表形成了一种串行加载关系，会延长关键渲染路径。
特别需要注意的是，@import并不是在页面HTML解析到对应link标签时才执行，而是在CSS文件被下载后解析时才会触发。因此，如果@import放置在CSS文件中间或底部，虽然语法上无效，但浏览器仍然会先下载整个主CSS文件，随后才处理@import，造成更明显的延迟。规范的写法是放在文件顶部，减少不必要的解析等待。
利用媒体查询实现条件按需加载
@import支持在引入语句后面追加媒体查询条件，这样只有当媒体条件匹配时，浏览器才会下载被导入的样式表。这个特性是实现按需加载的核心。
/* 仅在屏幕宽度大于等于768px时加载桌面端布局样式 */
@import url("desktop-layout.css") screen and (min-width: 768px);
/* 仅在打印时加载打印样式 */
@import url("print.css") print;
/* 组合多个媒体条件 */
@import url("tablet.css") screen and (min-width: 600px) and (max-width: 1024px);
使用媒体查询时，浏览器在解析主CSS文件时会评估当前设备状态是否匹配媒体条件。如果不匹配，则完全跳过该@import的请求，不会下载对应的样式文件，从而减少无效资源加载，尤其适合移动端和桌面端差异化场景。
需要澄清的是，媒体查询的评估发生在主CSS文件下载之后。也就是说，主CSS文件仍会完整下载，但条件不满足时，@import引入的文件不会被请求。如果希望从一开始就不下载主CSS中的某些内容，可以使用link标签直接配合media属性，但@import在模块化样式管理上仍然有优势。
例如，一个响应式项目可能包含基础样式、移动端样式、桌面端样式和打印样式。通过@import配合媒体查询，可以将这些文件分开维护，同时确保用户只下载符合其设备条件的样式，避免一次性加载所有规则。
/* main.css */ @import "base.css"; @import "mobile.css" screen and (max-width: 767px); @import "desktop.css" screen and (min-width: 768px); @import "print.css" print;
@import延迟加载的性能影响与最佳实践
传统上，@import因其串行请求方式常被批评为性能杀手。在HTTP/1.1时代，每个@import都会增加一次独立请求，且主CSS解析被阻塞。即便配合媒体查询，浏览器仍需要完整下载主CSS文件才能判断是否需要加载子样式表，这可能延迟首屏渲染。
在现代HTTP/2环境下，多路复用在一定程度上缓解了请求数量带来的影响，但@import的加载顺序仍然不如并行link标签高效。此外，主CSS文件中的@import会导致浏览器无法提前发现关键资源，无法利用preload或预解析优化。因此，对于关键渲染路径中的样式，建议避免使用@import，而是直接使用link标签或内联关键CSS。
对于非关键样式，可以将@import与媒体查询结合，放在主CSS文件末尾或使用单独的异步加载策略。例如，把不影响首屏的组件样式通过@import在特定条件下加载，可以平衡模块化和性能。另外，使用构建工具（如PostCSS的postcss-import插件）可以将@import语句在构建阶段合并为单个文件，从而完全消除运行时请求，这是目前最推荐的做法。
替代方案：link标签预加载与动态注入
如果希望获得比@import更好的性能表现，同时保留按需加载的能力，可以考虑使用link标签的media属性配合动态切换，或者使用JavaScript动态创建link元素。
<!-- 默认不加载，当媒体条件匹配时才加载 --> <link rel="stylesheet" href="desktop.css" media="(min-width: 768px)"> <!-- 使用preload提前声明，浏览器会在空闲时下载，但不阻塞渲染 --> <link rel="preload" href="theme-dark.css" as="style" media="(prefers-color-scheme: dark)">
通过link标签的media属性，浏览器会在匹配条件时异步加载样式表，不会阻塞主文档解析。preload则可以提前告诉浏览器该资源可能被使用，且不阻塞渲染，配合as="style"能够在需要时快速应用。
动态注入样式表的方式也提供了高度灵活性。例如，通过matchMedia监听媒体查询变化，按需创建link元素，实现真正的运行时按需加载，且不增加额外HTTP请求的串行等待。
// 监听屏幕宽度变化，动态加载桌面样式
const mq = window.matchMedia('(min-width: 768px)');
if (mq.matches) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'desktop.css';
document.head.appendChild(link);
}
// 监听主题偏好变化
const darkMode = window.matchMedia('(prefers-color-scheme: dark)');
if (darkMode.matches) {
import('./dark-theme.css'); // 动态import，现代构建工具支持
}
总结来说，@import加媒体查询是一种简单但并非最优的按需加载方式。在项目初期或维护小型样式库时可以使用，但在高要求的性能场景下，应优先考虑构建合并、link预加载或动态注入等替代方案。理解其加载原理，才能在不同场景中做出正确选择。