@import必须位于CSS文件最开头，仅允许@charset语句前置；路径基于当前文件位置；媒体查询须紧接url后；链式加载阻塞渲染，建议用替代。
@import必须写在CSS文件最开头，否则静默失效
浏览器只认文件顶部的@import，只要前面有任何非@charset内容（包括空行、注释、CSS规则），它就直接忽略——不报错，也不加载，样式就“消失”了。
-
@charset "UTF-8";是唯一允许出现在@import之前的语句，且必须紧贴第一行 - 多个
@import可以连续写，但每条都得单独占一行，不能用逗号分隔 - 常见翻车点：VS Code 默认保存时加 BOM 或末尾换行，可能让首行看似空——建议用 hex editor 确认文件开头字节
@import路径基于当前CSS文件位置，不是HTML页面
比如main.css在/assets/css/main.css，想引入同目录的reset.css，就得写@import url("reset.css");，而不是@import url("../css/reset.css");——后者会404，但控制台未必报错，只在Network里看到失败请求。
- 推荐用绝对路径：
@import url("/assets/css/variables.css");，避免相对路径歧义 - 不建议省略
url()直接写字符串（如@import "a.css";），部分旧版 Safari 会解析失败 - URL中支持引号、单引号、双引号，但不能混用；空格和特殊字符需编码
@import媒体查询必须紧跟url后，不能换行或分号后写
条件加载的语法非常严格：@import url("mobile.css") screen and (max-width: 768px);是对的；@import url("mobile.css"); screen and (max-width: 768px);是错的——后半段会被当普通CSS规则处理，无效且无提示。
- 媒体查询括号内不能有换行，也不能多加空格（如
( max-width: 768px )在某些浏览器中会失效） -
print、screen、all等关键字区分大小写，必须小写 - 条件只控制是否发起请求，不控制是否应用；即使加载了
print.css，在屏幕浏览时它的规则也不会生效
@import链式加载会阻塞渲染，三个以上就明显卡顿
每个@import都是串行的：浏览器必须下载并解析完base.css，才能开始请求layout.css，再等它完成才请求theme.css。三层层叠下来，在弱网下首屏白屏时间可能增加500ms+。
立即学习“前端免费学习笔记（深入）”；
- 这不是理论问题——Chrome DevTools 的 Network 面板里能看到清晰的瀑布流，每条
@import请求都排在前一条之后 - 即使启用了 HTTP/2，
@import仍无法并行，因为它是 CSS 解析阶段的行为，不是资源发现阶段 - 真正能并行的是
<link rel="stylesheet">，所以生产环境优先改用<link>集中引入，开发期若坚持用@import，最多控制在2个以内，且只用于变量、重置等极小文件
@import的“静默失效”特性——它不抛错、不警告，只悄悄跳过。调试时别急着查控制台，先打开Network看请求发没发，再确认CSS文件开头有没有不可见字符或空行。 
