内联style属性仅作用于当前元素，无法继承、复用或批量控制；它将样式与语义混杂，违背关注点分离原则，应严格限于紧急覆盖、JS动态控制等不可替代场景。
内联style属性让样式完全绑定到单个HTML元素上
写在 style 属性里的样式，比如 <button style="padding: 8px 16px; background: #007bff;">，其作用范围被浏览器硬性限制为“仅当前元素”。它不会自动影响子元素，不能被其他元素继承，也无法通过选择器（如 .btn）批量控制——哪怕你复制粘贴10次，每一份都是孤立的字符串，彼此毫无关联。
复用需要语义化类名，而不是重复写style值
当你看到5个按钮都用了 style="border-radius: 4px; font-weight: 500;"，它们表达的其实是同一语义：“主操作按钮”。但内联方式下，你无法提取这个共性；而换成 class="btn btn-primary"，就能在CSS里统一定义：
.btn { padding: 8px 16px; border-radius: 4px; }
.btn-primary { background: #007bff; font-weight: 500; }
后续新增按钮只需加 class，改设计也只动一处CSS文件。
动态生成或JS拼接时，内联style几乎无法做一致性校验
- 模板字符串中：
`<div style="color: ${error ? 'red' : 'gray'}">`—— 颜色逻辑散落在JS里，没法用PostCSS或Stylelint检查是否符合设计系统 - 服务端渲染中：
res.send(`<p style="margin: ${margin}px">`)—— margin 值来源不可控，调试时得翻后端代码、前端JS、模板三处 - 构建工具（如Vite）对这类字符串完全无感知，无法压缩、Tree-shaking 或提取变量
真正复用不了的不是“样式规则”，而是“样式意图”
内联样式把“怎么显示”和“它是什么”混在一起。你没法从 style="color: #e74c3c" 推断出这是错误提示、危险操作还是禁用态；而 class="text-error" 或 data-status="error" 能明确传递语义。一旦团队扩大、项目迭代，靠颜色值维护状态映射会迅速失控——尤其是当设计规范要求所有错误色从 #e74c3c 改为 #c0392b 时，全局搜索 style="color: 可能匹配到注释、JS字符串甚至旧分支残留代码，漏改一处就埋个视觉bug。
立即学习“前端免费学习笔记（深入）”；
