内联样式总能覆盖外部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？
是，但不是唯一解，而且风险很高：
ImageMagick 批处理处理器
下载
使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。
立即学习“前端免费学习笔记（深入）”；
-
color: green !important;确实能压倒style="color: red"，但若后续JS又执行el.style.color = "purple"，那!important就失效了——因为内联样式本身也能加!important（虽然HTML里写不了，但JS可以：el.setAttribute("style", "color: purple !important")） - 真正可持续的做法是：把状态控制权交还给class。比如把
style="{ color: textColor }"改成:class="{ 'text-red': status === 'error', 'text-green': status === 'success' }"，再在CSS里定义.text-red { color: red; }
为什么别依赖内联样式调试
临时加style="border: 1px solid red"查布局没问题，但上线前必须清理：
- 样式和结构耦合，改颜色要翻HTML，而不是只改一个CSS变量
- 无法被CSS预处理器（如Sass）、PostCSS插件（如autoprefixer）处理
- 服务端渲染（SSR）或静态站点生成（SSG）时，内联样式可能因JS未执行而丢失，导致首屏样式错乱
最常被忽略的一点：Shadow DOM中，内联样式依然优先级最高，但它的作用域被限制在shadow root内——这时候你以为覆盖了全局，其实只改了组件内部，连!important都跨不出去。
