@import必须位于css文件最开头（仅允许@charset在其前），路径基于当前css文件位置，会阻塞渲染且不支持链式并行加载，媒体查询须紧接url后。
@import 必须写在样式表最前面
如果 @import 前面有其他 CSS 规则（哪怕是一行注释、一个空行、或 @charset 之外的任何声明），浏览器会直接忽略它，不加载子样式表。这不是警告，是静默失效。
- ✅ 正确：文件开头第一行就是
@import url("base.css"); - ❌ 错误：顶部先写了
body { margin: 0; }，再写@import - ⚠️ 注意：
@charset "UTF-8";是唯一允许出现在@import之前的语句，且必须紧贴首行
@import 的 url() 写法和路径容易出错
路径解析基于「当前 CSS 文件所在位置」，不是 HTML 页面位置。很多人误以为相对路径从 HTML 开始算，结果 404 却查不出原因。
- 假设
main.css在/assets/css/main.css，想引入同级的reset.css，应写@import url("reset.css");，不是@import url("../css/reset.css"); - 用绝对路径更稳：
@import url("/assets/css/variables.css"); - 不推荐省略
url()直接写字符串（如@import "a.css";），部分旧版 safari 会解析失败
@import 会阻塞渲染，比 慢得多
浏览器遇到 @import 时，会暂停当前样式表解析，发起网络请求，等子样式表下载并解析完才继续。而 <link> 是并行加载的。
- 页面有 3 个
@import链式嵌套？那基本是串行加载，白屏时间明显拉长 - 现代项目里，除非是极小的变量文件（如
colors.css），否则优先用<link rel="stylesheet"> - 构建工具（如 webpack、Vite）打包时，
@import通常会被内联或转为link，但开发时仍要留意原始行为
媒体查询条件写在 @import 后面才生效
@import 支持条件加载，但语法位置很关键：媒体查询必须紧跟在 url 后面，不能换行，也不能放在分号之后。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
@import url("print.css") print; - ✅ 正确：
@import url("mobile.css") (max-width: 768px); - ❌ 错误：
@import url("mobile.css"); (max-width: 768px);—— 后半段被当普通 CSS，无效 - ⚠️ 注意：条件只控制是否加载，不控制是否应用；加载后若匹配不到媒体环境，规则本身仍不会生效
实际项目中，@import 最常栽在顺序和路径上，而且问题往往不报错，只是样式没出来——这时候先盯住文件开头有没有空行、有没有 @charset 写错位置，比调半天控制台更有用。