内联样式（style属性）优先级最高，无法被外部css覆盖；真正需防范的是js动态改写或与class混用导致的维护混乱。
直接写 style 属性的样式不可能被外部 CSS 覆盖——它本就是最高优先级，根本不存在“防止被覆盖”这回事；真正该防的是它自己被后续 JS 动态改写、或你误以为改了外部 CSS 就能生效。
为什么你改了 CSS 文件却没变色
常见错误现象：button { color: blue; } 在 main.css 里写了，但按钮文字仍是红色。打开 DevTools → Elements 面板 → 找到该 <button></button> 标签，一眼就能看到 style="color: red"。这不是“被覆盖”，是它压根就没走 CSS 层叠流程，浏览器直接按 element.style.color 渲染。
内联样式的特异性（specificity）固定为 1000，而外部 CSS 即使写成 #app .btn:hover 最多也就 110 左右，打不过。连 !important 都无效——HTML 规范根本不允许在 style 属性里写 !important，写了也忽略。
JS 动态设置 style 时最容易踩的坑
你以为只是加个颜色，结果把整个内联样式清空了：
-
❌ 错误做法：
el.setAttribute('style', 'color: red;')—— 会覆盖之前所有通过el.style.margin = '8px'设置的值 -
✅ 安全做法：
el.style.color = 'red'（驼峰命名，自动转短横线） -
✅ 批量赋值：
Object.assign(el.style, { color: 'red', fontSize: '14px' }) -
✅ 只删某一项：
el.style.removeProperty('color')或el.style.color = ''
注意：JS 设置的是 backgroundColor，但在 Elements 面板里显示为 background-color；搜不到别急着怀疑逻辑，先看对没看对属性名。
想让样式“可控又不打架”，只有一条路：别硬塞 style
真正难维护的不是 style 本身，而是它和 class 混用、散落在 HTML 各处、又没人知道谁在运行时偷偷改它。比如：
<div class="card" style="margin-top: 16px;"> —— <code>margin-top破坏了.card对间距的封装意图- 后台返回主题色，直接拼
style="background-color: ${color}"—— 后续换色方案就得全局搜索替换 - 动态值存
data-属性，比如<div data-theme-color="#3b82f6">，再由 JS 统一读取并设 <code>el.className或受控操作el.style - 尺寸/位置等必须实时计算的场景（如拖拽、Canvas 容器），用
el.style.transform或el.style.left，但确保只在必要时机写，且有明确清理逻辑 - 服务端渲染一次性状态（如邮件模板高亮），
style是合理选择，但仅限 SSR 上下文，不要带到客户端交互中
替代方案很明确：
最常被忽略的一点：computed 值才是真相
别光盯着 Elements 面板里的 style 属性——它可能为空，但 Computed 标签页里 color 的来源写着 element.style，说明是 JS 运行时写的。这时候得搜项目代码里所有 .style.color = 或 .setAttribute('style',，而不是反复调 main.css。
真正要盯住的，从来不是“怎么让 style 更强”，而是“谁在什么时候写了它、能不能收口”。一旦失控，哪怕只有一行 el.style.display = 'block'，就足以让整套响应式断掉。
