@import不是推荐的主引入方式，它会阻塞渲染、串行加载、静默失效风险高；真要用，必须严格守序、慎选路径、避开媒体查询写错位置。
@import 不是推荐的主引入方式，它会阻塞渲染、串行加载、静默失效风险高；真要用，必须严格守序、慎选路径、避开媒体查询写错位置。
为什么 @import 经常“没效果”
不是代码写错了，而是浏览器直接忽略——@import 规则一旦没放在 CSS 文件最开头（除 @charset 外），就彻底失效，且不报错、不警告。常见静默失败场景：
- 文件顶部有空行、注释或
/* */块 - 写了
@charset但后面多了一个空行，再写@import - 误把
@import放在body { ... }之类规则之后 - 路径按 HTML 位置算，实际是按当前 CSS 文件所在目录解析
@import 的三种合法写法与路径陷阱
路径必须基于「当前 CSS 文件」位置计算，不是 HTML 页面位置。比如 main.css 在 /assets/css/main.css，想引入同级的 reset.css：
- ✅ 正确：
@import url("reset.css");（相对路径，从/assets/css/开始找） - ✅ 更稳：
@import url("/assets/css/variables.css");（绝对路径，以站点根目录为基准） - ❌ 危险：
@import "reset.css";（省略url()，旧版 Safari 可能解析失败） - ❌ 常见错误：
@import url("../css/reset.css");（误以为从 HTML 页面路径出发）
带媒体查询的 @import 必须紧贴 url 后写
媒体条件不是独立语句，必须和 url() 写在同一行、分号前，否则后半段被当普通 CSS 解析，完全无效：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
@import url("print.css") print; - ✅ 正确：
@import url("mobile.css") screen and (max-width: 768px); - ❌ 错误：
@import url("mobile.css");screen and (max-width: 768px);（第二行被当选择器或无效声明） - ⚠️ 注意：媒体条件只控制是否发起请求，不控制样式是否生效；即使加载了
print.css，在屏幕环境下它的规则也不会起作用
为什么生产环境几乎不该用原生 @import
它本质是“阻塞式串行加载”：浏览器解析到 @import url("a.css")，就停住，发请求，等 a.css 下载+解析完，才继续解析后续内容。如果 a.css 里又 @import "b.css"，那就是 a→b 串行，白屏时间明显拉长。
- ✅ 替代方案：
<link rel="stylesheet" href="main.css">是并行加载，性能好得多 - ✅ 构建时处理：Webpack/Vite 会把
@import内联或转成link，但开发阶段仍受上述顺序/路径限制 - ✅ 极小变量文件除外：比如只含
:root自定义属性的colors.css，影响有限，可酌情保留
真正容易被忽略的，是那个看不见的空行——检查 @import 是否生效，第一反应不该是打开控制台查 404，而是用编辑器显示空白字符，确认它是不是真的在文件第一行、紧贴 @charset 后面、前面没任何东西。
