内联样式仅在三类场景不可替代：紧急覆盖、JS驱动的实时变化、HTML邮件开发；分别用于秒级修复样式冲突、动态响应运行时数据、适配邮件客户端限制。
内联样式不是“该不该用”，而是“什么时候非用不可”——它只在三类场景里真正不可替代：紧急覆盖、JS驱动的实时变化、以及邮件等受限环境。
临时覆盖外部样式时，用 style 是最快止损方式
当你发现某个按钮被第三方库或全局 CSS 错误地设置了 display: none，而你又不能立刻改源码或提 PR，直接加 style="display: block !important;" 能秒级恢复功能。注意：!important 在这里不是必须的——内联样式本身权重就是 1000，通常已足够压倒类名或 ID 选择器。
- 常见错误现象：加了 class 却没生效，开发者工具里看到样式被划掉（strikethrough），说明被更高优先级规则覆盖
- 实操建议：仅用于上线前 hotfix 或 QA 环境临时验证；上线前务必移除，否则会干扰后续 CSS 维护
- 别踩坑：不要写
style="color: red; font-size: 14px; margin: 0; padding: 0;"这种“全量重写”，只改你真正要覆盖的那一项，比如只写style="color: red;"
JavaScript 动态控制样式时，element.style.xxx 是最直接路径
需要根据滚动位置改变透明度、按进度值拉伸进度条、或点击后高亮输入框边框——这些依赖运行时数据的样式，用 class 切换反而绕远路。直接操作 style 属性响应更快，且无需预定义一堆状态类。
- 典型用法：
const input = document.getElementById("email"); input.addEventListener("blur", () => { if (!isValidEmail(input.value)) { input.style.borderColor = "#e53e3e"; } else { input.style.borderColor = ""; } }); - 性能提示：连续动画中慎用（如
scroll事件里频繁赋值style.transform），应改用requestAnimationFrame或 CSS 变量 +setProperty - 别踩坑：不要用
element.setAttribute("style", "...")替代element.style.xxx，前者会完全覆盖已有内联样式；后者是安全增量更新
HTML 邮件开发中，内联是唯一可靠方案
Gmail、Outlook 等客户端会剥离 <head> 中的 <style>，甚至过滤带 class 的标签。所有样式必须塞进每个元素的 style 属性里，否则发出去就是裸文本。
立即学习“前端免费学习笔记（深入）”；
- 实操建议：别手写——用
Premailer或juice这类工具自动把外部 CSS 内联化；自己写容易漏掉td、font等老式标签的兼容样式 - 兼容性陷阱：
flex、grid、@media几乎全部失效，只能靠table布局 + 行内width/align/bgcolor等古董属性 - 别踩坑：不要试图用内联样式实现响应式；移动端适配靠的是
max-width+width: 100%+ 条件注释（如 Outlook 的[if mso]）
真正难的不是“怎么写内联样式”，而是判断它是不是当前问题的最小解法。一旦你开始在 HTML 里重复写 style="margin: 8px 0; font-weight: 600;" 超过三次，就该停手——那不是快捷方式，是技术债的起点。
