应优先用 classlist 增删预设类而非直接操作 style，因后者硬编码样式、无法继承/响应/复用，且易触发重排；批量设样式可用 object.assign(element.style, {…})，属性名须驼峰、值需带单位。
内联样式改一次要搜几十处，根本没法统一维护
因为 style 属性把样式逻辑硬编码在 HTML 结构里，脱离了 CSS 的层叠、继承和作用域机制。你改一个按钮背景色，得全局搜索 background-color: 或十六进制值，结果搜出 47 处——其中 32 处是 JS 字符串或注释里的误命中，9 处该响应式但没写媒体查询，6 处其实是布局 bug。
常见错误现象：style="padding: 8px; border-radius: 4px;" 在 <button></button>、<a></a>、<input> 上重复出现，却无法归类为同一语义（比如 .btn-primary），后续调整间距或圆角时只能逐个手动改。
- 无法复用：同一组声明写十次，就是十份冗余代码
- 无法响应：加
@media或:hover直接被浏览器静默丢弃 - 无法继承：子元素拿不到父级
style里的color或font-size
JavaScript 操作 style 属性容易触发重排且读不到真实值
elem.style.color = 'red' 看似简单，但每次赋值都可能触发浏览器重排（reflow），比切换 class 开销大得多；更隐蔽的是，elem.style.color 只返回内联值，查不到 class 或外部 CSS 设定的颜色。
要读真实生效的值，必须用 getComputedStyle(elem).color；批量修改时，setAttribute('style', '...') 会清空之前所有 elem.style.xxx 设置，导致 padding、border 全丢。
- JS 中属性名必须驼峰：
backgroundColor✅，background-color❌（语法错误） - 高频更新（如拖拽中的
left）优先走transform+will-change - 推荐用
Object.assign(elem.style, { color: 'red', fontSize: '14px' })批量设，避免字符串拼接漏分号
DevTools 里看到的“inline”不等于真的生效
浏览器解析 style 属性时只认 property: value; 格式，其余一概无视。语法稍错就静默丢弃整条声明，且不报错——你在 DevTools 的 Styles 面板里看到带「inline」标记的，才是真被解析的部分。
以下任一条件不满足，后续所有声明都会截断：
- 声明间**必须用分号分隔**：
color: red font-size: 14px;缺分号 →font-size不生效 - 含空格的值**必须加引号**：
font-family: 'Times New Roman';✅，font-family: Times New Roman;❌ - 长度单位**不可省**：
width: 100%;✅，width: 100;❌（被当无效值丢弃） - 属性名必须用**短横线小写**：
background-color✅，backgroundColor❌（JS 操作时才用驼峰）
哪些场景真绕不开 style？怎么管住它
确实有三类绕不开：transform 实时定位（拖拽/滚动）、SSR 动态主题色注入、Canvas 容器宽高绑定。但必须加约束：
- 只在 JS 中用
Object.assign(el.style, {})设置，禁用字符串拼接 - HTML 模板里禁止出现
style属性（除非邮件模板或 SSR 首屏骨架） - 框架中必须用受控语法：
style={{}}或:style={}，而非静态字符串 - 服务端渲染时注入
style="--theme-color: #2563eb"必须校验变量合法性，不能拼接用户输入
最常被忽略的一点：维护成本不来自“写了多少 style”，而来自“改一处，要确认多少地方是否受影响”。失控比语法本身更危险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
