class属性值是空格分隔的字符串，多空格、逗号或中文空格会导致类名解析错误；CSS中.a.b与.a .b语义不同，前者为同时具备多类，后者为后代选择器；JS操作应使用classList API而非直接赋值className。
class 属性写法错一个空格就失效
HTML 的 class 属性值是空格分隔的字符串，不是数组也不是列表。写成 class="btn primary" 是对的，但写成 class="btn primary"（中间两个空格）或 class="btn,primary" 就完全无效——浏览器会把它当做一个类名 btn,primary 处理，而不是两个独立类。
常见错误现象：document.querySelector('.btn.primary') 查不到元素，但明明 HTML 里写了两个类；实际是 class 值里混入了逗号、中文空格、换行或多余空格。
- 用
element.className检查时，注意它返回的是纯字符串，前后/中间不能有不可见字符 - 服务端模板（如 Django/Jinja）拼接 class 时，容易因条件逻辑漏掉空格，建议用数组 join：
['btn', isPrimary && 'primary'].filter(Boolean).join(' ') - Vue/React 中绑定 class 推荐用对象语法（
{ 'btn': true, 'primary': isActive }）或数组语法，避免手拼字符串
.class 选择器不区分顺序，但连写和空格含义天差地别
CSS 里 .btn.primary 和 .btn .primary 看起来只差一个空格，语义完全不同：.btn.primary 匹配同时拥有 btn 和 primary 两个类的元素；.btn .primary 匹配在 .btn 元素内部、且自身带 primary 类的**后代元素**。
使用场景：组件封装时经常需要“同时具备多个类才生效”的样式，比如按钮变色 + 加载态：<button class="btn btn--loading primary"></button>，对应 CSS 写 .btn.btn--loading，而不是 .btn .btn--loading（后者永远不命中）。
立即学习“前端免费学习笔记（深入）”；
-
.a.b.c表示“同时含 a、b、c 三个类”，顺序无关，.a.c.b效果一样 -
.a .b中间有空格，表示后代关系，性能略低，且易误匹配深层嵌套 - 用
querySelector测试时，document.querySelector('.btn.primary')能命中，document.querySelector('.btn .primary')需要 DOM 结构真有嵌套才能命中
JavaScript 动态操作 class 容易漏掉 toggle 或 contains
直接改 element.className = 'new' 会覆盖所有已有 class，这是最常踩的坑。应该优先用 classList API，它专为多 class 场景设计。
常见错误现象：点击切换按钮样式后，其他功能类（比如 disabled 或 hidden）被意外清掉；或者反复点击没反应，因为没判断当前是否存在该类。
-
element.classList.add('active')—— 安全追加，已存在也不报错 -
element.classList.remove('active')—— 安全删除，不存在也无副作用 -
element.classList.toggle('active')—— 自动判断增删，适合开关类 -
element.classList.contains('active')—— 判断是否存在，比className.includes更可靠（避免子串误匹配，比如active包含在inactive里）
class 名带连字符或数字开头会导致 JS 访问失败
HTML 允许 class="my-btn 2col layout-2024" 这种写法，但如果你在 JS 里用点号访问：element.classList.my-btn，会语法错误；element.classList.2col 直接报错，因为变量名不能以数字开头。
这不是 class 本身的问题，而是 JS 对象属性访问的限制。只要不用点号访问，其实不影响使用——所有 class 操作都应走 classList 方法，而非试图当对象属性读取。
- 不要写
element.classList.my-class，改用element.classList.contains('my-class') - 连字符 class 名在 CSS 里完全合法，无需转驼峰；JS 操作时也统一用字符串传参，不涉及命名冲突
- 如果真要映射 class 到 JS 变量（比如配置表），建议用 Map 或普通对象做映射，别依赖属性名自动转换
