@import顺序失效因其非同步执行，而是CSS解析时发起请求，受并行加载、缓存、嵌套及媒体查询影响；应改用按DOM顺序加载以确保规则注入顺序。
为什么@import的顺序会失效
@import不是简单按代码顺序执行的“同步加载”，它本质是CSS解析器遇到时才发起HTTP请求，且浏览器可能并行加载、缓存复用、甚至重排加载队列。尤其在多个@import嵌套、跨域名或带媒体查询时，@import的声明顺序 ≠ 实际应用顺序。
常见错误现象：base.css里@import "reset.css"，但reset.css里的body { margin: 0 }被base.css里的body { margin: 1em }覆盖了——说明reset.css规则后解析、后生效，顺序反了。
- 所有
@import必须写在CSS文件最顶部（前面不能有任何非@import、非注释内容） - 嵌套
@import（A里import B，B里import C）会导致深度不确定的加载延迟，实际顺序更难控 - Chrome DevTools 的
Network面板能看到每个@import资源的真实请求完成时间，常比HTML中<link>晚几百毫秒
用替代@import实现严格顺序控制
<link>是HTML解析时主动触发的资源预加载，浏览器能按DOM顺序排队、阻塞渲染（如果没加as="style"或media），天然保证CSS规则注入顺序与HTML中书写顺序一致。
使用场景：需要确保normalize.css → variables.css → components.css逐层叠加，且不允许后者覆盖前者基础定义。
立即学习“前端免费学习笔记（深入）”；
- 把所有
@import语句替换成<link rel="stylesheet" href="...">，按依赖顺序从上到下写在里 - 避免混用：不要在同一个
里既有<link>又有@import，否则@import引入的样式仍可能后注入 - 注意
media属性：带media="print"的<link>不会阻塞屏幕样式加载，但会影响顺序逻辑——非关键样式建议用media隔离
@import + async加载时顺序彻底不可靠
有人试图用@import url("theme.css") layer(theme);或配合media="(prefers-color-scheme: dark)"做条件加载，但这会让CSS规则进入不同层或延迟解析，完全脱离原始顺序上下文。
典型错误：main.css里写@import "dark.css" (prefers-color-scheme: dark);，结果dark.css里定义的.btn { background: #333 }在浅色模式下也生效了——因为解析器已提前注入，只是规则被媒体查询包裹，并未真正“延迟加载”。
-
@import不支持async或defer，所谓“异步”只是不阻塞HTML解析，但依然参与CSSOM构建竞争 - 现代方案应改用
CSS @layer+<link>分层加载，例如<link rel="stylesheet" href="base.css" layer="base"> - 旧项目若必须保留
@import，至少确保它只出现在单个CSS入口文件头部，且该文件本身由<link>引入
检查顺序是否真的生效
别信代码写了就对了。真实顺序得看浏览器最终生成的CSSOM树。
实操建议：
- 打开DevTools →
Elements→ 右键→Reveal in Elements panel，确认<link>节点顺序和路径是否符合预期 - 在
Computed面板选一个元素，展开styles右侧的“来源”，看每条样式来自哪个文件及行号，验证覆盖关系是否如你所愿 - 禁用缓存刷新页面，观察
Network中各CSS资源的Start Time和End Time，若reset.css比base.css晚完成，那即使写了@import在前也没用
真正的顺序控制不在写法上，而在加载时机和解析上下文。只要还依赖@import做主链路，就永远有隐藏的竞态风险。
