内联样式总能覆盖外部CSS因其权重固定为1000，远高于选择器组合（如#app .header:hover仅131），这是CSS引擎硬编码规则；它无法被常规CSS反向覆盖，只能通过JS操作或删除style属性解决。
内联样式为什么总能覆盖外部CSS
因为浏览器层叠规则中，style 属性的权重固定为 1000，远高于任何选择器组合（比如 #app .header:hover 算下来才 131）。这不是“偶然生效”，而是 CSS 引擎硬编码的优先级逻辑。
这意味着：只要 DOM 元素上存在 style="color: red"，哪怕外部 CSS 写了 .text-red { color: blue !important }，只要 JS 后续没改 element.style.color，红色就一定显示。但这也带来隐患——它无法被常规 CSS 规则反向覆盖，只能靠 JS 覆盖或删掉 style 属性本身。
哪些场景下必须用内联样式
不是“可以用”，而是“绕不开”：
- 邮件模板：多数客户端（如 Outlook、Apple Mail）会剥离
<style></style>和外链 CSS，只认style属性 - 服务端动态注入：SSR 渲染时，根据用户设备或主题生成的
style="font-size: 1.2em"，无法提前写进 CSS 文件 - JS 动画关键帧：频繁修改
transform或opacity时，直接操作element.style.transform比 class 切换更高效，且避免重排 - 调试隔离：临时加
style="outline: 2px solid red"查布局问题，不污染已有样式体系
注意：这些场景的共同点是「样式值在运行时才确定，且作用范围严格限定于单个元素」。
立即学习“前端免费学习笔记（深入）”；
为什么不能用内联样式写全局主题色或字体
写了就等于放弃维护性：
- 改一个主色要遍历所有 HTML 文件搜
style="color: #333"，而不是改一个 CSS 变量 - 无法被
postcss处理（比如自动加-webkit-前缀） - SSR 首屏可能渲染出内联样式，但 hydration 后 JS 未执行，导致样式丢失或错乱
- 构建工具（如 Webpack）无法压缩、提取、复用内联样式中的重复值
哪怕只是写 style="margin: 0"，也建议抽成 .no-margin 类——因为“零值”同样需要统一语义和生命周期管理。
Shadow DOM 中内联样式的特殊行为
内联样式在 Shadow DOM 里依然优先级最高，但它只作用于当前 shadow root 内部节点，跨不出去。比如：
<my-component> <div style="color: red">只红这里</div> </my-component>
这个 red 不会影响组件外的 body 或父级任何元素，哪怕用了 !important。这是它的保护机制，也是容易被忽略的边界——你以为覆盖了全局，其实只锁在组件壳里。
真正难处理的是 Portal 场景：当弹窗用 ReactDOM.createPortal 挂到 document.body，它就脱离了原组件的 Shadow DOM 或 CSS-in-JS 上下文，内联样式虽然还在，但 theme、breakpoint 等上下文变量全断了。
