绝大多数项目必须用外链css，因其是唯一支持长效缓存、跨页复用和团队协作的方案；内联样式仅限邮件模板、js实时控制单元素或临时调试三种场景，且严禁用于主题色等通用样式。
绝大多数项目该用外链，不是“更好”，而是不这么写根本没法维护、没法上线、没法协作。
内联样式（style="..."）只在三种情况里能站住脚
它不是“快一点的替代方案”，而是绕过 CSSOM 解析、选择器匹配、缓存机制的临时补丁。真要用，必须满足以下全部条件：
- 样式是服务端动态生成的，且只渲染一次（比如邮件模板里
style="margin:0;padding:0;"） - JS 正在实时控制单个元素的
transform或opacity，用 class 切换会卡顿 - 调试时临时加，加完立刻删——上线代码里出现
style="color:#333;"就算违规
别用它写字体、间距、主题色。写了就等于把样式逻辑锁死在 HTML 里，后面谁改都得全局搜 style=。
<style></style> 标签适合单页原型，但不是“中间路线”
放在 里的 <style></style> 看似折中，实际只是把耦合从行内挪到文档头。它仍随 HTML 一起传输，无法被浏览器单独缓存，也不能跨页面复用。
- 适用场景极窄：静态落地页、嵌入 iframe 的小工具、CMS 插件沙箱环境（禁止外链）
- 不能用
@import，也不支持scoped（那是 Vue 扩展，原生 HTML 不认） - 如果用了
.btn这类 class，和外链 CSS 冲突时照样按层叠规则走，不是“一定生效”
<link rel="stylesheet"> 是默认选项，但路径和位置容易翻车
外链不是“多发一次请求”那么简单。现代浏览器对 <link> 有专门优化：HTTP/2 多路复用、预加载提示、缓存校验都依赖它。但写错位置或路径，效果直接归零：
-
<link>必须放在里；塞进可能阻塞渲染，甚至触发重绘 - 路径以 HTML 文件位置为基准，不是 CSS 文件位置；推荐用根相对路径（如
/css/main.css） - 避免用
@import替代<link>：它串行加载、阻塞渲染，性能比外链还差
真正难的不是选哪种方式，而是守住边界：只要页面不止一个、未来要迭代、有人协作，就别让任何样式逻辑出现在 HTML 源码里——哪怕只有一行 style="display:none;"，都可能成为后续排查的盲点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
