内联样式导致HTML与样式强耦合，难以维护、复用和缓存，且优先级混乱；应通过语义化CSS类替代，并在必要场景（如邮件模板）明确标注。
内联样式让HTML和样式强耦合，改一处就得翻全页
内联样式写在style属性里，比如<div style="color: #e74c3c; font-weight: bold;">，它直接把视觉表现锁死在HTML结构里。一旦设计规范调整——比如错误提示文字统一改成#c0392b、加粗改为font-weight: 600——你就得全局搜索所有style=，逐个替换，漏掉一个就出错。
更麻烦的是，这类样式常混在模板字符串、JSX或服务端渲染逻辑中，根本没法用CSS工具做批量检查或自动修复。
无法复用、不能缓存、优先级混乱是三大硬伤
内联样式天生不支持复用：同样“危险操作确认弹窗标题”在10个页面出现，就得写10次style="color: #e74c3c; margin-bottom: 0.5rem;"；浏览器也无法对这些样式做缓存，每次请求都得重新下载HTML；而当它和外部CSS冲突时，!important成了唯一解法，结果就是!important堆叠、覆盖关系失控。
- DevTools里看到某元素的
color被标记为inline，但来源可能是JS动态插入、模板引擎拼接，甚至某个已下线的功能模块残留 - 团队协作时，“这个红色到底代表什么状态？”没人能从
style属性里看出语义，只能靠猜或翻Git历史 - 邮件模板或首屏关键样式除外——这两类场景确实需要内联，但必须明确标注
/* email-only */或/* critical-inline */注释
迁移到外部CSS不是复制粘贴，而是重建语义映射
别用“把所有style属性拷出来塞进common.css”这种做法。重点是识别重复模式，再赋予业务含义：
立即学习“前端免费学习笔记（深入）”；
- 搜索项目里所有
color: #e74c3c;，发现它总和“错误提示”“删除按钮”“禁用状态”一起出现 → 提取为.text-error、.btn-danger、.disabled-state - 避免
.red-text这种纯视觉命名，它无法表达“这是表单校验失败时的提示色”，下次换主题色时还得全量替换 - 用浏览器DevTools的
[style]筛选器定位内联样式，右键“Break on attribute modification”可捕获JS动态添加的样式
Bootstrap项目里内联样式尤其危险
Bootstrap本身靠btn、container、col-md-6等通用类构建视觉系统，一旦混入内联样式，等于在同一层面上同时用两套规则控制外观——你既用btn btn-primary定义按钮基础样式，又用style="padding: 8px 16px;"微调尺寸，结果就是后续任何栅格或主题调整都可能意外破坏这个按钮。
真正难处理的不是技术迁移，而是那些没写文档、没留注释、只在某次紧急上线时随手加上的style——它们像幽灵一样飘在代码里，直到某天UI重构时突然集体反扑。
