项目中必须用引入CSS，因其支持并行加载、preload、media条件及HTTP/2多路复用；@import导致串行加载与FOUC，仅限调试临时使用；内联style属性仅适用于单次动态场景。
直接说结论：项目里该用 ，调试时可临时用 @import，内联样式（style 属性）只在极少数动态场景下用——不是“三种都能用”，而是有明确优先级和边界。
什么时候必须用
这是唯一支持并行加载、可被浏览器预加载（preload）、能设置 media 条件、支持 HTTP/2 多路复用的引入方式。几乎所有生产环境都靠它。
- 不阻塞 HTML 解析（只要没加
blocking属性），但会阻塞后续 JS 执行（关键渲染路径上） -
rel="preload"可提前拉取关键 CSS： - 媒体查询生效早于 DOM 构建：
，对应设备一打开就按条件加载 - 服务端渲染（SSR）或静态站点生成（SSG）中，只有
能被正确提取和注入
@import 在 CSS 文件里引入其他 CSS 的问题
它写在 CSS 里（比如 main.css 开头），不是 HTML 中的标签。看起来方便，实际是性能陷阱。
- 强制串行加载：浏览器必须先下载并解析完当前 CSS，才能发起
@import指向的资源请求 - 无法被预加载器识别，
preload对它完全无效 - 在
@import后面定义的样式，可能因加载延迟导致 FOUC（内容闪动） - 仅在 IE5+ 和现代浏览器中支持，但 Safari 旧版本对嵌套
@import有解析 bug - 示例（不推荐）：
@import url("reset.css");
@import "theme.css";
内联样式 style 属性该不该写进 HTML 标签
只在「单次、不可复用、强绑定元素状态」的场景下合理，比如服务端渲染首屏关键样式、JS 动态控制某个元素显隐/位置。
立即学习“前端免费学习笔记（深入）”；
- 没有网络请求开销，但无法缓存，每次 HTML 重载都要重新传输
- 破坏样式与结构分离，维护成本高；CSS 选择器权重也容易失控（
!important更难覆盖） - 无法使用伪类（
:hover）、媒体查询、CSS 变量等高级特性 - React/Vue 等框架中，
style={{ opacity: isLoaded ? 1 : 0 }}是合法用法；但写成就是反模式- 注意：服务端注入 critical CSS 到
标签是 OK 的，但那是块，不是style属性真正容易被忽略的是加载时机链：HTML 解析 → 遇到
→ 触发 CSS 下载 → CSSOM 构建 → 与 DOM 合成 render tree。任何把 CSS 拖到后面（比如放在 - 注意：服务端注入 critical CSS 到
