内联样式权重最高，影响维护性；应避免使用style属性，改用class控制样式，通过js切换类名或结合css变量实现动态效果，提升可管理性。
内联样式（style 属性）的权重在 CSS 中是最高的，通常会覆盖外部样式表或内部样式中的规则。这虽然在某些场景下有用，但容易造成样式难以维护和覆盖的问题。为减少 style 方式带来的高权重干扰，可以采用以下方法来控制其影响范围并提升样式的可管理性。
1. 避免使用内联 style，改用 class 控制样式
最直接有效的方式是避免在 HTML 元素上直接写 style。将样式提取到 class 中，通过切换 class 来实现样式变化，这样不仅降低权重，也更利于复用和维护。
例如：- 不要写：
<div style="color: red; font-size: 14px"></div> - 推荐写：
<div class="text-red small-font"></div>，并在 CSS 中定义这些类
2. 使用 !important 时要谨慎，优先通过结构优化选择器
当内联样式已存在且无法修改时，若需覆盖，可能需要使用 !important。但这不是长久之计。更好的方式是提升选择器特异性（specificity），比如使用更具体的选择器组合。
示例：- 原本：内联
style="color: red"很难被.btn { color: blue }覆盖 - 改进：使用
#container .btn.special这类高特异性选择器，减少对 !important 的依赖
3. 将动态样式抽离到 CSS 类中，通过 JS 切换类名
很多原本需要用 style 动态设置样式的情况，其实可以通过 JavaScript 操作 class 实现。
立即学习“前端免费学习笔记（深入）”；
比如：
- 不推荐：`element.style.color = 'blue'`
- 推荐：`element.classList.add('highlight')`，并在 CSS 中定义 `.highlight { color: blue; }`
这种方式让样式统一管理，也避免了行内样式权重过高的问题。
4. 使用 CSS 自定义属性（CSS Variables）增强灵活性
如果确实需要动态控制某些样式值，可以结合 CSS 变量和 class 使用，既灵活又不会提高权重。
示例：- CSS 中定义：
:root { --text-color: black; } .dynamic-text { color: var(--text-color); } - JS 修改变量：
document.documentElement.style.setProperty('--text-color', 'red')
这样无需内联 style，也能实现动态效果，且样式仍受 CSS 规则控制。
基本上就这些。核心思路是：尽量不用 style 写死样式，把控制权交还给 class 和 CSS 机制，既能降低权重冲突，也让项目更易维护。
