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