必须用标签的场景包括：SSR动态注入主题色变量、邮件模板禁止外链、首屏关键CSS内联、微前端沙箱禁用；它可避免FOUC，但无法缓存且不支持构建工具处理。
只有在极少数受控、动态、且样式不可预测的场景下，<style></style> 标签内联 CSS 才比外部引入更合理——它不是“更好”，而是“不得不这样选”。
哪些场景必须用 <style></style> 标签而不是 <link>
当样式值来自运行时计算（比如 SSR 渲染时注入主题色）、或需绕过 CSS 文件加载时机（首屏关键样式）、或要动态生成选择器（如 CSS-in-JS 的服务端 fallback）时，<style></style> 是唯一能保证样式立即生效、不触发 FOUC（Flash of Unstyled Content）的手段。
- SSR 中根据用户偏好注入
:root变量：style.textContent = `:root { --primary-color: ${userTheme}; }` - 邮件模板中禁止外部请求，所有样式必须内嵌到
<style></style>里 - Vite / Webpack 构建产物中，
<style></style>被自动提取为<style>{criticalCSS}</style>插入 HTML，用于首屏关键 CSS - 某些微前端沙箱环境禁止执行
<link>加载，只允许同步解析<style></style>
<style></style> 的优先级和覆盖逻辑怎么算
<style></style> 属于内部样式表，其规则优先级高于外部 <link> 引入的 CSS，但低于元素上的 style 属性。但它依然遵守 CSS 特异性（specificity）规则——一个 .card:hover 在 <style></style> 里写出来，照样能生效；而写在 style="color:red" 里的，会直接压制它。
- 同名规则下，后定义的
<style></style>块会覆盖先定义的（文档流顺序起作用） -
!important在<style></style>里仍有效，但会破坏调试可读性，DevTools 的 Computed Styles 面板里容易看到多条冲突声明 - 注意：若外部 CSS 用了更高特异性选择器（如
#header .nav-item.active），<style></style>里写.nav-item仍会被覆盖
为什么不能把整站 CSS 都塞进 <style></style>
浏览器无法缓存 <style></style> 内容，每次 HTML 请求都得重新下载全部样式；构建工具（如 PostCSS、css-minimizer-webpack-plugin）对它基本无感知，压缩、拆包、scope 处理都失效；多人协作时，样式散落在 HTML 模板里，Git diff 和 Code Review 成本陡增。
立即学习“前端免费学习笔记（深入）”；
- HTML 文件体积膨胀，首字节（TTFB）没变慢，但整体 HTML 解析 + 样式计算耗时上升
- 无法做 CSS 拆分（如按路由懒加载组件样式），
<style></style>是全量同步注入 - 服务端渲染时若动态拼接大量 CSS 字符串，容易漏分号、引号错位，导致整个
<style></style>块失效 - CI/CD 流程中，样式变更无法被单独检测、灰度或回滚
真正需要 <style></style> 的地方，往往只有一小段（几十行），且有明确生命周期——比如主题色变量、首屏骨架、邮件兼容样式。把它当成“CSS 的紧急出口”，而不是默认通道。
