内联样式仅限邮件模板、SSR首屏关键样式等不可替代场景，其余必须用外部样式表；因其特异性最高但破坏可维护性，混用时会覆盖伪类、媒体查询等所有CSS规则。
内联样式和外部样式表不是“选一个用”，而是必须明确分工：内联样式只该出现在动态计算、服务端一次性渲染或邮件模板等不可替代的场景；其余所有情况，外部样式表是唯一合理选择。
内联样式为什么不能当主力用
它优先级最高，但代价是彻底破坏样式可维护性。你改一个 margin，就得在 HTML 里搜十次 style="margin: ..."，漏一处就错位；JS 直接写 element.style.color = 'red' 后，再想加 :hover 或响应式断点，根本没法加——这些规则只能写在 CSS 文件里。
- 常见错误现象：
div style="width: 300px;"和外部.card { width: 400px; }并存，结果宽度被内联锁死，后续任何类名切换或媒体查询都无效 - 适用场景仅限：邮件模板（部分客户端只认内联）、SSR 渲染首屏关键样式（如 Next.js 的
critical CSS注入）、极简原型快速验证 - 绝对不要用于：按钮状态切换、主题色切换、动画起始位置、响应式布局控制
外部样式表怎么引入才不出错
<link rel="stylesheet" href="style.css"> 看似简单，路径和加载时机一错就白引。Vite 默认支持 import './style.css'，Webpack 也一样，本质仍是生成 <link> 标签，不是内联；但如果你手写 @import url('base.css'); 在 CSS 文件里，它会阻塞并串行加载，比 <link> 多耗 200ms 以上。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 路径必须相对 HTML 文件位置写，
href="css/style.css"和href="./css/style.css"在某些构建工具下行为不一致，推荐统一用href="css/style.css" - 避免把
<link>放在底部：CSS 阻塞渲染，放错位置会导致 FOUC（闪白） - 如果要用 preload 提前拉取关键 CSS，写成
<link rel="preload" as="style" href="style.css">，再补一个<link rel="stylesheet" href="style.css">
想动态改样式，为什么别碰 style 属性
直接操作 element.style 是最暴力的方式，但它绕过了整个 CSS 层：伪类、媒体查询、继承链、缓存机制全失效。React/Vue 中写 style={{ color: isActive ? 'blue' : 'black' }} 看似方便，实则把样式逻辑硬塞进 JS，后期想加 transition 或 dark mode 支持，就得重写整块逻辑。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是预设类名：
.btn--active { color: blue; transition: color 0.2s; }，再用element.classList.toggle('btn--active') - 需要 JS 计算值（比如拖拽实时定位），优先用
transform: translateX(120px)，而不是left: 120px，前者不触发重排，性能高一个数量级 - 真要 JS 控制颜色或尺寸？封装成 CSS 自定义属性：
:root { --primary-color: #007bff; }，再用document.documentElement.style.setProperty('--primary-color', '#dc3545')
最容易被忽略的是：内联样式和外部样式混用时，不是“谁写在后面谁生效”，而是特异性（specificity）碾压一切。哪怕外部写了 #header .nav li a:hover 这种高权重选择器，只要元素上挂着 style="color: red"，hover 颜色就永远变不了——这种问题在线上环境极难定位，因为 DevTools 里看起来“明明写了 hover 规则”。
