class属性合法写法为小写字母、数字、连字符组合，不可数字开头或含空格/中文/点号；多类名用单个空格分隔；js操作须用classlist.add()避免覆盖。
直接在 HTML 元素的开始标签里写 class 属性，值为一个或多个合法类名，用空格分隔——这是唯一正确、可预测、兼容性最好的方式。
class 属性的合法写法有哪些限制
类名不是随便写的字符串，浏览器解析时会静默忽略非法字符，导致 querySelector 找不到、CSS 不生效、JS 操作失效。
- 必须小写，且只含字母、数字、连字符（
-），不能以数字开头：user-card✅，3col❌，UserCard❌ - 禁止空格、中文、点号（
.）、冒号（:）、下划线（_）——user_name在旧版 SSR 或某些构建工具中可能被截断 - 多个类名之间用**单个空格**分隔：
class="btn btn-primary is-loading"✅，class="btn btn-primary"（双空格）虽不报错但易引发维护混乱
为什么不能用 className = "xxx" 或 setAttribute("class", ...)
这是 JS 操作时最常误用的两种写法，它们绕过了浏览器对 class 的语义化管理机制。
-
element.className = "active"：会**覆盖全部已有类名**，哪怕你只想加一个状态类 -
element.setAttribute("class", "active")：大小写敏感，传"Class"就静默失败；且不处理重复、空格归一化等细节 - 正确做法永远是
element.classList.add("active")——自动去重、忽略不存在的类、不破坏其他类
多类名组合时的常见陷阱
类名不是越多越好，堆砌会导致样式不可控、调试困难，尤其在 BEM 或原子化 CSS 场景下。
- BEM 中不允许嵌套层级：
card__content__title❌，应拆成card__content和title两个独立块，或用card__content-title - 混用业务类和工具类时，间距/颜色等必须全由工具类接管：
btn u-p-4 u-bg-blue-500✅，但不能再写btn--large u-p-4，否则btn--large里的 padding 会和u-p-4叠加冲突 - 动态生成类名（如
item-${id}）必须确保id全局唯一，否则 hydration 阶段 React/Vue 会把两个同名类元素识别为同一节点，视图错乱
真正难的不是写对一个 class，而是让所有 class 在半年后仍能被准确理解、安全复用、不依赖上下文——这意味着命名要克制，操作要走 classList，组合要有约束。否则改暗色模式那天，你会在控制台反复敲 document.querySelector(".is-dark-active-hover") 却得不到任何结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
