内联样式难维护因其耦合HTML、不可复用、无法缓存、不支持预处理器且易陷入优先级混乱；应通过DevTools定位、语义归类、类名替代来系统迁移，但动态样式、邮件模板及首屏关键样式除外。
内联样式为什么难维护
内联样式写在 style 属性里，比如 <div style="color: red; margin: 10px;">，它直接耦合 HTML 结构，改样式就得翻 HTML 文件，没法复用、不能缓存、无法用 CSS 预处理器，还容易被 !important 拖进优先级泥潭。
更实际的问题是：团队协作时，没人知道某段红色文字的样式到底来自哪——是 JS 动态加的？是模板引擎插进去的？还是某个已遗忘的 style 属性？
怎么把 style 属性批量抽到外部 CSS 文件
别手动复制粘贴。先定位所有内联样式，再按语义归类，最后用类名替代。关键不是“搬代码”，而是“建映射”。
- 用浏览器 DevTools 的 Elements 面板筛选
[style]，右键 → “Break on attribute modification” 可抓动态插入的内联样式 - 搜索项目中所有
style="（注意引号匹配），包括 .html、.vue、.jsx、模板字符串 - 对重复出现的样式组合（如
color: #333; font-size: 14px;）统一提取为类，例如.text-body - 避免用语义模糊的类名，比如
.red-text；优先用功能/场景命名，如.error-message或.card-title
style 属性和外部 CSS 的优先级冲突怎么解
内联样式的 CSS 优先级高于外部样式表里的任何选择器（除非加 !important）。迁移到外部后，如果页面表现异常，大概率是旧内联样式还在起作用，或新类没正确应用。
立即学习“前端免费学习笔记（深入）”；
- 检查是否遗漏了某些动态 JS 代码，仍在运行时设置
element.style.color = 'red'—— 这会覆盖外部 CSS - 用 DevTools 的 Computed 面板看最终生效的
color值，点开来源，确认是来自style属性还是.css文件 - 迁移过程中可临时加
!important强制覆盖（仅调试用），但上线前必须删掉，改用更高特异性选择器，比如从.btn改成.header .btn
哪些情况其实不该迁走内联样式
不是所有 style 都该一刀切移出。动态生成的样式（如宽度随数据变化）、服务端渲染的个性化布局、或极小范围的一次性修饰，留在内联反而更可控。
- JS 计算出来的尺寸：
<div style={`height: ${itemHeight}px`}>—— 外部 CSS 无法绑定变量 - 邮件模板中的兼容性要求：很多邮箱客户端只认内联样式，
<link>根本不加载 - 首屏关键 CSS：部分场景下，少量内联关键样式（如字体、背景色）能避免 FOUC，比等外部文件加载更稳
真正要清理的是那些写着固定值、重复出现、且毫无上下文说明的“死样式”。它们才是拖慢迭代的隐形负债。
