内联样式改一次要找几十处，因其脱离css层叠、继承、作用域和媒体查询机制；应归类为语义化class（如.btn-primary）统一管理，动态控制优先用class切换而非el.style。
内联样式为什么改一次要找几十处？
因为 style 属性完全脱离 CSS 的层叠、继承、作用域和媒体查询机制。你改一个按钮的背景色，得全局搜索 background: 或 #007bff，但搜出来的 47 处里，可能有 32 处是误命中（比如注释里的颜色值、JS 字符串里的十六进制），9 处该升级为响应式，6 处其实是布局 bug。CSS 变量或 class 切换做不到这点——它们天然绑定语义和作用范围。
重复的 style="padding: 8px 16px; border-radius: 4px;" 怎么识别和归类？
这类组合大概率不是“随机写写”，而是表达同一语义：主操作按钮。识别方法很简单：
- 看是否出现在多个同类元素上（
<button></button>、<a class="btn"></a>、<input type="submit">） - 看是否伴随相同交互意图（点击跳转、提交表单、触发弹窗）
- 看是否与特定状态强相关（如
disabled时加opacity: 0.5）
归类后命名别用 btn-blue-8px，改用 .btn-primary 或 .action-button，并在外部 CSS 中统一定义。
动态设置样式时，el.style.color = 'red' 和 el.className = 'text-error' 差在哪？
前者把样式逻辑锁死在 JS 里，后者把控制权交还给 CSS 层。实际影响包括：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
el.style.color无法响应主题切换（除非你手动遍历所有元素再 set） - 没法用 DevTools 的 “Toggle Pseudo-classes” 调试 hover/focus 状态
- 字体大小、行高、过渡等属性失去可继承性和缩放能力
- 拼接字符串（如
el.style.cssText = `color:${c};font-size:${s}px`）极易漏分号或引号，导致白屏
真要动态控制，优先走 class 切换；非要用 style，就只在 JS 中受控赋值，HTML 模板里禁止出现 style 属性。
哪些场景真绕不开 style？怎么管住它？
确实有三类绕不开：
- 运行时计算的位置/尺寸（如拖拽容器的
transform: translateX(123px)） - 服务端渲染时的主题色注入（如 SSR 模板中根据用户偏好注入
style="--theme-color: #2563eb"） - Canvas 容器或视频元素的宽高绑定（需 JS 读取 DOM 尺寸后实时更新）
管住它的办法很具体：只在 JS 中用 Object.assign(el.style, {...}) 设置，禁用字符串拼接；高频更新的属性（如动画中的 left）优先走 transform + will-change；框架中必须用 style={{}} 或 :style={} 这类受控语法，而不是静态字符串。
最常被忽略的一点：维护成本不来自“写了多少 style”，而来自“改一处，要确认多少地方是否受影响”。哪怕只有一处 style="margin-top: 1rem"，你也得查它是否在 flex 容器里、是否被 JS 动态覆盖、是否兼容老 Safari —— 这些排查，在外部 CSS 文件里可以通过 lint、devtools 的 computed 样式面板、@supports 快速验证；在内联里，只能靠人肉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
