推荐渐进式剥离内联样式：先冻结高危样式，再按模块抽离静态样式到局部CSS，接着用CSS变量承接动态值，最后建立检查清单与自动化辅助。
旧项目里内联样式（style="..."）多，直接全量迁移容易出问题，推荐“渐进式剥离”：先保功能、再理结构、最后收口。核心原则是——不改行为，只挪位置；每一步可验证，有回滚余地。
一、识别并冻结高危内联样式
不是所有 style 都适合立刻移走。优先处理那些：
• 重复出现在多个元素上的（比如同一种按钮颜色/间距）
• 和 JS 动态绑定强相关的（如 element.style.left = x + 'px'）
• 涉及响应式或主题切换的（如 style="color: var(--primary)"）
这些先打标、注释、或用 data-migrated="pending" 暂时标记，暂缓迁移，避免破坏交互逻辑。
二、按模块抽离静态样式到局部 CSS 文件
别一上来就建 global.css。从最独立、改动最小的模块开始，例如一个商品卡片组件：
• 新建 components/product-card/product-card.css
• 把该模块内所有内联样式（如 style="padding: 12px; border-radius: 4px;"）复制过去，转成类名（如 .product-card { padding: 12px; border-radius: 4px; }）
• 在对应 HTML 中删掉 style 属性，加上类名 class="product-card"
• 用浏览器 DevTools 对比渲染效果，确保无偏移、无重叠
三、用 CSS 自定义属性承接动态值
对 JS 动态设置的样式（如背景色、宽度），不要硬编码进 CSS 文件。改用 CSS 变量：
• 在根节点或组件容器上设置变量：<div class="chart" style="--chart-height: 300px; --chart-color: #4a90e2;">
• CSS 中引用：.chart { height: var(--chart-height); color: var(--chart-color); }
这样既解耦了 JS 和样式值，又保留了运行时灵活性，后续还能统一接管主题系统。
立即学习“前端免费学习笔记（深入）”；
四、建立迁移检查清单与自动化辅助
手动扫 style="..." 容易漏。建议：
• 用正则快速定位：grep -r "style=\"[^\"]*\"" src/ --include="*.html" --include="*.vue" --include="*.jsx"
• 写个简易脚本，把内联样式提取为类、生成对应 CSS 块，并输出修改建议
• 在 CI 中加一条检查：禁止新提交包含未标记的内联样式（可通过 ESLint 或自定义 HTML lint 规则实现）
不复杂但容易忽略：每次迁移后，务必在真机+不同分辨率下点开对应页面，看是否有样式丢失或布局错乱。内联样式常隐含“默认覆盖层叠”的副作用，挪出去后可能被其他规则意外覆盖。
