classlist api 是最直接可靠的方案，原生支持安全增删切换类名，避免覆盖或拼接错误；配合 dataset 实现状态驱动样式，统一用 classlist 管理动态类，禁用 classname 赋值以防冲突。
classList API 是最直接可靠的方案
原生 classList 能安全增删切换类名，不破坏已有 class，也不依赖框架。它比手动拼接字符串或操作 className 属性更健壮，尤其在多状态共存、条件频繁变更时优势明显。
常见错误是用 element.className = 'a b' 覆盖整个属性，导致丢失其他动态添加的类；或用 includes() 判断再手动拼接，容易漏空格、重复、顺序错乱。
-
classList.add('active', 'hover')—— 批量添加，已存在不报错 -
classList.remove('disabled')—— 安全移除，不存在也不报错 -
classList.toggle('loading', isLoading)—— 第二个参数控制开关逻辑 -
classList.replace('old', 'new')—— 替换类名，兼容性需注意（IE 不支持）
用 dataset 配合 classList 实现状态驱动样式
当组件样式由多个布尔状态组合决定时（比如 isDisabled、isExpanded、hasError），硬编码所有 class 组合极易出错。用 dataset 存储状态，再用 classList 同步更新，逻辑更清晰。
例如一个按钮组件：button.dataset.disabled = 'true'，然后统一监听 dataset 变化，调用 classList.toggle('disabled', button.dataset.disabled === 'true')。
- 避免在 JS 中维护 class 字符串拼接逻辑
- dataset 值始终是字符串，判断时注意用
=== 'true'而非== true - 不要直接修改
dataset的 key 名（如dataset.class），会被忽略
警惕 className 与 classList 混用导致的覆盖冲突
如果某处用 element.className = 'base' 强制赋值，会清空之前所有通过 classList.add() 添加的类——这是最常被忽略的坑。
尤其在第三方库或旧代码中，可能混用两种方式。建议项目内统一约定：只用 classList 管理动态类，静态基础类写在 HTML 模板里，不通过 JS 设置 className。
- 检查控制台是否有意外丢失的类名，可临时加
console.log(element.classList)验证 - Vue/React 等框架内部也基于类似机制，但它们做了封装；纯 HTML 场景下必须自己守住边界
- 若必须兼容老代码，可用
element.setAttribute('class', ...)替代className =，更易追踪
需要批量更新时，用 toggle + 条件数组更简洁
当一组类名是否启用完全取决于某个对象的键值对时，遍历对象比写一堆 if 更可靠。比如：{ active: true, error: false, small: true } 对应三个类。
直接展开为数组再调用 toggle，能减少嵌套判断，也方便后续扩展新状态。
const states = { active: isActived, error: hasError, small: isSmall };
Object.entries(states).forEach(([cls, enabled]) => {
el.classList.toggle(cls, enabled);
});
注意：这种写法要求类名和状态 key 名一致；若不一致，可先映射成 [['is-active', isActived], ['has-error', hasError]] 数组再遍历。
复杂点在于状态来源分散（props、event、storage）、更新时机不一致，这时候得靠一次性的同步函数兜底，而不是靠每个地方单独操作 classList。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
