class属性用于为html元素指定一个或多个类名，以供css样式匹配和javascript操作；必须写作class而非\_class，多个类名须用英文空格分隔，如class="btn primary"。
class 属性不是 _CLASS，别写错命名
HTML 中用于分类标识的属性是 class，不是 _CLASS。浏览器完全不识别 _CLASS 这种自定义属性——它不会触发任何样式匹配，也不会被 CSS 选择器捕获。如果你在模板里写了 _CLASS="btn primary"，那只是个无用的字符串，CSS 里的 .btn 规则根本不会生效。
常见错误现象：
– 样式没应用，开发者反复检查 CSS 拼写，却漏看了 HTML 属性名；
– 使用 JS 通过 element.getAttribute('_CLASS') 取值，逻辑能跑通，但样式始终不出现。
- 必须写成
class="btn primary" - 多个类名用空格分隔，不能用连字符、下划线或逗号
- 类名本身可以含连字符（如
form-control），但属性名永远是class
多个 class 值如何协同控制样式
一个元素可以同时拥有多个 class 值，这是实现样式复用的核心机制。每个类名对应一组独立声明，浏览器会把所有匹配的规则叠加应用，冲突时按 CSS 特异性（specificity）和顺序决定最终值。
使用场景举例：按钮既要通用尺寸，又要区分语义状态，还要适配主题 ——<button class="btn btn--large is-disabled theme-dark">提交</button>
-
btn提供基础边框、内边距、字体等共用样式 -
btn--large覆盖尺寸相关属性（用 BEM 命名避免歧义） -
is-disabled控制禁用态（通常配合pointer-events: none和透明度） -
theme-dark是作用域更广的主题开关，可能影响整块区域
注意：顺序不影响特异性，但会影响同权重规则的覆盖结果（后声明的生效）。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
JS 动态操作 class 的安全写法
用 JS 修改 class 时，直接赋值 el.className = 'new' 会清空原有所有类名，极易引发样式丢失。推荐使用 classList API。
- 添加类：
el.classList.add('active')，已存在则忽略 - 移除类：
el.classList.remove('hidden')，不存在也不报错 - 切换类：
el.classList.toggle('expanded')，有则删、无则加 - 检查是否存在：
el.classList.contains('loading')，返回布尔值 - 批量操作：
el.classList.add('a', 'b', 'c')或el.classList.remove('x', 'y')
避免踩坑：
– 不要用 el.setAttribute('class', ...) 替代 classList，它无法智能合并；
– 在 Vue/React 等框架中，优先用响应式绑定（如 :class 或 className）而非手动操作 DOM。
class 复用的边界：什么时候该用自定义属性或 data-*
如果某个标识纯粹用于 JS 行为控制，且不需要关联任何样式，就不要硬塞进 class。比如标记“这个弹窗由用户点击触发”，后续只用于统计或条件判断，跟视觉无关 —— 此时用 data-trigger="click" 更语义清晰，也避免污染样式层。
性能与可维护性影响：
– 过度依赖 class 控制行为，会导致 CSS 文件膨胀（比如为每种状态写一堆 .is-xxx）；
– 同一类名在不同组件中含义冲突（active 在导航中表示当前项，在卡片中表示展开态），容易误改；
– SSR 渲染时，服务端无法预知 JS 运行后的 class 变化，可能导致首屏样式错乱。
真正需要复用的 class，应该满足：稳定、视觉导向、跨组件一致、不随业务逻辑频繁变更。
