行内样式权重为1000，高于ID选择器（100）、类名（10）和标签（1），故总优先于外部CSS；避免方式是用语义化类名+JS切换或CSS自定义属性；清理需分步验证、替换与约束。
行内样式 style 为什么总是赢过 CSS 文件？
因为浏览器的层叠规则里，行内样式的权重是 1000，而 ID 选择器才 100，类名/属性/伪类是 10，标签和伪元素只有 1。哪怕你写 !important 在外部 CSS 里，也只到 1000，和行内样式打平——但实际渲染时，后定义的 !important 才会生效，顺序难控，不推荐硬刚。
怎么避免写 style 属性又保持动态样式？
用 CSS 类名 + JS 控制类的增删，而不是拼 style 字符串。核心是把「样式逻辑」从 HTML 层抽离到 CSS 规则中。
- 把颜色、尺寸、状态等变量提前定义成语义化类名，比如
.bg-primary、.text-sm、.is-loading - JS 只负责切换这些类：
element.classList.add('is-error'); - 需要计算值（如
top、transform）时，改用 CSS 自定义属性（--offset），再用 JS 设置：element.style.setProperty('--offset', `${value}px`);，然后在 CSS 中引用：transform: translateY(var(--offset));
已有大量 style 属性要清理，怎么安全过渡？
别一次性全局替换，容易漏掉依赖内联样式的 JS 逻辑。分三步走：
- 先用 DevTools 的「Computed」面板确认哪些
style是真正被 JS 动态修改的（比如轮播图位移、拖拽位置），这些保留或改用 CSS 变量 - 对纯静态的内联样式（如
style="color: #666; font-size: 14px;"），批量替换成预设类名，配合 CSS Reset 检查视觉回归 - 在构建流程中加 ESLint 规则（如
react/no-inline-styles或vue/no-inline-style），阻止新代码写style={...}
真需要覆盖行内样式时，CSS 怎么写才可靠？
优先用 [style] 属性选择器 + 更高 specificity 的组合，比硬上 !important 更可控：
立即学习“前端免费学习笔记（深入）”；
.card[style] .title {
color: #333 !important;
}
但注意：这种写法本质是妥协，只用于遗留系统兜底。长期维护项目里，[style] 选择器本身就在暗示“这里本不该有行内样式”。
最麻烦的其实是第三方组件库自带的 style，这时候得看它是否支持 className 或 theme 配置；不能覆盖就封装一层，用 React.forwardRef 或 Vue v-bind="$attrs" 接管容器节点，再统一加类。
