内部样式适合单页、一次性页面且CSS≤1KB的场景；外部样式更常用，因可缓存、易优化；@import会阻塞并行加载，应避免；选择依据是复用性与稳定性。
内部样式（<style></style>）适合什么场景
内部样式写在 HTML 的 里，适用于单页应用或一次性页面，比如营销落地页、邮件模板、后台临时报表页。它的优势是免去一次 HTTP 请求，渲染时无需等待外部文件加载。
但要注意：<style></style> 内容会随 HTML 一起传输，无法被浏览器缓存复用；如果多个页面共用相同样式，重复嵌入反而增大 HTML 体积；CSS 代码混在 HTML 中也增加维护成本。
- 仅当样式代码量小（建议 ≤ 1KB）、且只用于当前页面时才考虑内部样式
- 避免在 SPA 的主 HTML 中写大量
<style></style>，否则首屏 HTML 过大，影响 TTFB 和解析速度 - 不要把媒体查询、字体声明、关键 CSS 提取逻辑交给后端拼进
<style></style>，容易出错且难调试
外部样式（<link rel="stylesheet">）为什么更常用
外部样式通过 <link href="main.css" rel="stylesheet"> 引入，是绝大多数项目的标准做法。浏览器能独立缓存 CSS 文件，后续访问直接读取本地副本；构建工具（如 Webpack、Vite）可对它做压缩、拆包、自动注入哈希等优化。
关键点在于加载时机：默认情况下，<link> 是阻塞渲染的，但可通过 media 属性或 preload 提前获取来缓解：
立即学习“前端免费学习笔记（深入）”；
- 用
media="print"或media="(max-width: 768px)"让非关键 CSS 异步加载（配合onload回调切换） - 对核心 CSS，推荐用
<link rel="preload" as="style" href="critical.css" onload="this.rel='stylesheet'">实现无阻塞加载 - 避免在
底部放<link>—— 浏览器不会按顺序执行，仍会阻塞渲染
@import 在 CSS 文件里引入其他样式很危险
@import 看似方便，实则破坏并行加载。它会让浏览器串行请求资源：先下载主 CSS，解析到 @import url("base.css") 才发起下一次请求，无法与 HTML 解析并发。
尤其在多层嵌套时（A.css @import B.css; B.css @import C.css），加载延迟呈链式放大，TTFB 和 FCP 明显变差。
- 绝对不要在生产环境的 CSS 文件中使用
@import - 构建工具（如 Sass）的
@import是编译期行为，输出的是合并后的一份 CSS，不触发运行时请求 —— 这和原生 CSS 的@import完全不同，别混淆 - 若需模块化，优先用构建工具的
import语法（ESM）或预处理器的@use/@forward
如何判断该用内部还是外部样式
真正决定因素不是“是否多页”，而是“是否可复用”和“是否稳定”。一个内部样式可能比一个未缓存的外部样式更快，但前提是它真的只用一次、且内容极简。
- 静态站点生成器（如 Hugo、Jekyll）中，每个页面都内联关键 CSS + 外链通用 CSS，是常见平衡方案
- 服务端渲染（SSR）项目中，常由框架（如 Next.js、Nuxt）自动提取并内联首屏关键 CSS，其余走外链
- 如果你发现
<style></style>块在多个 HTML 文件里一模一样，说明它其实该抽成外部文件 + 启用强缓存
最易被忽略的是缓存头配置：外部 CSS 若没设 Cache-Control: public, max-age=31536000，浏览器每次都会发条件请求，性能收益归零。
