必须将@import替换为<link>，因为@import导致串行加载、白屏延长、FOUC及带宽浪费，而<link>支持并行下载与media精准控制。
@import 会拖慢首屏，必须换成 <link> —— 这不是可选项，是性能底线。
为什么 @import 会让页面白屏更久
浏览器解析 HTML 时遇到 <link rel="stylesheet">，会立刻发起请求，并行下载、预解析、甚至预连接；而 @import 是 CSS 规则，只能写在 CSS 文件或 <style> 块里，浏览器得先下载并完整解析完当前样式表，才能读到它、再发下一个请求。
常见错误现象包括：DOMContentLoaded 延迟、首屏闪白（FOUC）、Lighthouse 报 “Eliminate render-blocking resources”。
- 多层嵌套如
A.css → @import "B.css" → @import "C.css"会变成 A→B→C 串行链，网络差时延迟翻倍 -
@import url("foo.css") screen and (min-width: 768px);仍会无条件下载，只是不应用——浪费带宽 - 旧版 IE（IE6–8）对
@import的位置和数量有严格限制，容易静默失效
怎么把 @import 正确替换成 <link>
核心动作就一条：把所有 CSS 文件里的 @import 行删掉，把对应文件路径挪到 HTML 的 <head> 里，用多个 <link> 并列声明。
立即学习“前端免费学习笔记（深入）”；
顺序不能错：被依赖的文件（如 reset.css、vars.css）必须写在依赖它的文件（如 main.css）之前，否则变量、重置规则会失效。
- ✅ 正确示例：
<link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="vars.css"> <link rel="stylesheet" href="main.css">
- ❌ 错误写法：
<style>@import "main.css";</style>或把main.css放在reset.css前面 - 注意
crossorigin属性：若 CSS 在 CDN 上，建议加crossorigin="anonymous"，避免跨域错误导致样式加载失败且无提示
media 属性不是装饰，是加载控制开关
<link> 的 media 属性能真正影响浏览器是否阻塞渲染、是否预加载；@import 的 media 查询只管“是否生效”，不管“是否下载”。
- 非关键样式（如打印、暗色主题）用
media="print"或media="(prefers-color-scheme: dark)"，浏览器会异步加载，不阻塞首屏 - 想让某份 CSS 完全不阻塞渲染（仅用于 JS 动态切换），可用
media="(min-width: 0)"—— 浏览器识别为始终匹配但不关键，延迟加载 - 千万别给主样式表乱加
media，比如media="all"或空值，部分浏览器会当成非关键资源处理
构建工具里藏着隐性 @import
Webpack/Vite 项目看似没写 @import，但如果你在入口 index.css 里写了 @import "./theme/dark.css";，构建后仍可能生成单个大 CSS 文件，或触发运行时动态插入逻辑，失去并行优势。
- 检查打包产物：打开最终 HTML，确认关键 CSS 是否真以多个
<link>形式存在，而不是合并进一个<style>或 JS bundle - 禁用 CSS 提取插件（如
mini-css-extract-plugin）时，样式可能被打包进 JS，导致 CSSOM 构建延迟到 JS 执行后 - Vite 的
css.preprocessOptions若启用了 Sass/Less 的@import，需确认是否在编译期已内联，还是留到了运行时
最容易被忽略的是：CSS 变量作用域看起来没变，但 vars.css 如果放在 main.css 后面，:root 声明就晚于使用点——调试时样式“突然生效”，其实是顺序错了。
