class属性是浏览器原生支持的最轻量归类方式，必须写成class="xxx"（空格分隔多个类），非法命名或错误分隔符均无效；.error等选择器匹配所有含该类的元素，类名可含连字符，多类共存时样式按特异性叠加，推荐用classlist操作而非拼接字符串。
直接用 class 属性就能批量归类，不需要 JS、不改结构、浏览器原生支持——这是最轻量也最可靠的归类方式。
class 属性怎么写才被 CSS 识别
必须写成 class="xxx"，不是 _CLASS、classname 或其他变体。浏览器完全忽略非法属性名，写了也白写。
- ✅ 正确：
class="error highlight"（两个类，空格分隔） - ❌ 错误：
_CLASS="error highlight"（CSS 选不到，JS 也拿不到样式效果） - ❌ 错误：
class="error,highlight"（逗号会被当作文本，只生效error） - ❌ 错误：
class="error;highlight"（分号同理，只认第一个）
.error 这类选择器匹配的是什么
.error 匹配所有带 error 类的元素，不管它在哪个标签里、有没有其他类、顺序在哪。
- 这些都匹配：
<div class="error">、<code><p class="error warning"></p>、<span class="warning error"></span> - 类名本身可以含连字符：
class="form-control"对应.form-control，这不是两个类，而是一个类名 - 多个类连写（无空格）表示“同时拥有”：
.btn.primary只匹配class="btn primary"，不匹配class="btn"单独存在的情况 - 比如
.error { color: red; }和.highlight { color: yellow; }同时作用于一个元素，color最终取后声明的那个（除非特异性更高） - 别依赖“写在后面就赢”，容易失控；推荐用组合类显式控制优先级，例如
.error.highlight { color: #d32f2f; } - 多类共存不增加性能负担，但过度嵌套如
.card.header.active.loading会让 CSS 难复用、难调试 - ✅ 推荐用
classList.add("active", "loading")—— 一次加多个，自动去重、不破坏原有类 - ✅
classList.remove("disabled", "pending")—— 安全移除，不存在也不报错 - ✅
classList.toggle("hidden")—— 切换单个状态，比手动判断 + add/remove 更稳 - ⚠️ 模板中拼接要注意空值：
class={`btn ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`}，漏空格或插进undefined会导致类名错乱
多个 class 共存时样式怎么叠加
浏览器会把所有匹配的规则都应用上去，冲突属性按特异性（specificity）和声明顺序决定最终值。
动态添加多个类名，为什么别拼字符串
用 el.className += " new-class" 看似简单，实际极易出错：可能重复加、空格混乱、覆盖已有类。
最容易被忽略的是：class 归类本身不带语义，也不强制唯一，但它必须和 CSS 规则配对才有意义——光加 class="foo" 而没写 .foo{}，等于没加。
