内联样式总能覆盖外部CSS因其权重为1000，高于任何选择器；框架或JS可能意外生成内联样式；可用class替代实现可持续控制；临时内联样式影响维护、构建和SSR；Shadow DOM中其作用域受限。
内联样式为什么总能覆盖外部CSS
因为浏览器渲染时，style属性自带权重1000，天然高于任何外部或内部CSS规则（哪怕你写了#header.nav.active:hover这种高特异性选择器，算下来也才0,1,3,1 → 131）。这不是“偶然生效”，而是CSS层叠算法的硬性规则。
哪些操作会意外生成内联样式
你以为没写style，但框架或脚本可能悄悄加了：
-
v-bind:style="{ opacity: isLoaded ? 1 : 0 }"（Vue）→ 渲染后变成style="opacity: 1" -
el.style.color = "red"（原生JS）→ 直接挂载到DOM元素上 - 某些UI库的Tooltip、Modal组件在定位时自动注入
style="top: 24px; left: 16px"
用浏览器开发者工具点开元素，在Styles面板顶部找element.style这一栏，只要它非空，就说明有内联样式在起作用。
想让外部CSS赢过内联样式，只能靠!important？
是，但不是唯一解，而且风险很高：
