必须保留的内联样式包括：动态计算尺寸、后端注入个性化样式、防FOUC关键布局样式、SVG内部fill/stroke变量值；应剥离静态颜色、间距、字体、边框/圆角、非动态布局属性。
哪些内联样式必须保留
HTML5 并不禁止 style 属性，但语义化和可维护性要求你只保留「无法被外部 CSS 可靠替代」的样式。典型必须保留的场景包括：
• 动态计算出的尺寸（如 width、height、transform: translateX(…) 由 JS 实时更新）
• 后端模板注入的个性化样式（如用户头像 background-color: #ff6b35 来自数据库字段）
• 服务端渲染中为避免 FOUC 强制内联的关键布局样式（如首屏 opacity: 0 → JS 激活后改 1）
• 内部元素的 fill / stroke，尤其当值来自变量且无对应 CSS 自定义属性支持时
哪些内联样式应立即剥离
以下 style 属性几乎总能被外部 CSS 更干净地接管，剥离后更利于复用与主题切换：
• 静态颜色（color: #333 → 改用 class="text-primary"）
• 固定间距（margin: 16px → 改用 class="mt-4" 或语义类 class="card-spacing"）
• 字体相关（font-size: 14px、font-weight: bold）
• 边框/圆角（border: 1px solid #eee、border-radius: 4px）
• 布局属性（display: flex、justify-content: center）——除非是 JS 动态切换的临时状态
如何安全迁移并避免破坏现有表现
迁移不是全局搜索替换 style=，而是分步验证：
• 先用浏览器 DevTools 的「Computed」面板确认该样式是否被其他规则覆盖（若已被覆盖，直接删）
• 对未被覆盖的样式，在外部 CSS 中新建高优先级选择器（如 [data-migrated="true"] .header），而非盲目提高权重（避免滥用 !important）
• 使用 CSS 自定义属性承接可变值：把 style="background-color: var(--bg-accent)" 提前声明在 :root，再通过 JS 修改 document.documentElement.style.setProperty('--bg-accent', '#007bff')
• 对含单位的动态值（如 top: 200px），改用 transform: translateY(200px) + CSS will-change: transform，更利于 GPU 加速且易被外部控制
自动化检测与清理建议
人工排查效率低，可用工具辅助识别冗余内联样式：
• 在 Chrome 控制台运行脚本快速列出所有带 style 的元素：
console.table([...document.querySelectorAll('[style]')].map(el => ({ tag: el.tagName, style: el.style.cssText, length: el.style.cssText.length })))• 使用 ESLint 插件
eslint-plugin-html + 自定义规则拦截新写的内联样式（如禁用 style 属性出现在 Vue/JSX 模板中）• 构建流程中接入
purgecss 或 unocss，它们虽主要处理 class，但配合 content 配置可识别残留的内联样式使用频率，辅助决策是否保留
立即学习“前端免费学习笔记（深入）”；
真正难的不是“能不能转”，而是判断哪些内联样式背后绑定了运行时逻辑或服务端上下文——这类样式一旦硬拆，轻则视觉错乱，重则交互失效。动手前先问一句：这个style 值，是在页面加载时就确定了，还是每次交互都在变？ 
