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