CSS引入方式有哪三种？怎么选？

CSS引入方式并非随意选择，而是有严格优先级和适用边界的性能决策：生产环境必须使用``标签引入，因其支持并行加载、`preload`预加载、媒体查询精准匹配及HTTP/2多路复用，是唯一能保障关键渲染路径高效执行的方式；`@import`仅限调试时临时使用，它强制串行加载、触发FOUC且无法被预加载器识别，实为性能陷阱；内联`style`属性则仅适用于极少数单次动态场景（如SSR首屏关键样式或JS实时控制元素状态），但会破坏样式可维护性、无法使用伪类与CSS变量，且不可缓存。真正影响页面性能的，是CSS加载时机如何嵌入HTML解析→CSSOM构建→渲染树合成这一关键链条——选错引入方式，轻则闪动，重则阻塞整个页面渲染。

直接说结论：项目里该用 ，调试时可临时用 @import，内联样式（style 属性）只在极少数动态场景下用——不是“三种都能用”，而是有明确优先级和边界。

什么时候必须用 标签引入 CSS

这是唯一支持并行加载、可被浏览器预加载（preload）、能设置 media 条件、支持 HTTP/2 多路复用的引入方式。几乎所有生产环境都靠它。

• 不阻塞 HTML 解析（只要没加 blocking 属性），但会阻塞后续 JS 执行（关键渲染路径上）
• rel="preload" 可提前拉取关键 CSS：

  <link rel="preload" href="main.css" as="style" onload="this.rel='stylesheet'">

• 媒体查询生效早于 DOM 构建：，对应设备一打开就按条件加载
• 服务端渲染（SSR）或静态站点生成（SSG）中，只有 能被正确提取和注入

@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 }} 是合法用法；但写成
  就是反模式
• 注意：服务端注入 critical CSS 到