class是为多元素共享样式设计的唯一合理选择，支持单元素多类（如class="card card-large warning"），类名须合法且空格分隔，优先用classList API操作，避免重复与覆盖。
直接用 class 属性，多个元素写同一个类名，CSS 里用 .类名 定义样式——这是最稳妥、最可维护的做法。
多个 div 共享样式时，class 是唯一合理选择
别用 id，它要求全局唯一，强行复用会破坏 HTML 结构合法性；也别靠重复写 style 属性，那等于把 CSS 硬编码进 HTML，改一处得改六处。用 class 就是为这种场景设计的。
-
class值可以重复出现在任意多个元素上，没有限制 - 一个
div还能同时拥有多个类，比如class="card card-large warning" - CSS 中写
.card { padding: 1rem; border: 1px solid #ccc; }，所有带card的元素立刻生效
class 值命名不能以数字开头，也不能含空格或特殊符号
像 class="1box" 或 class="my box" 都是无效的——浏览器会把后者只当成一个叫 my 的类，box 被忽略；前者则根本匹配不到 CSS 规则。
- 合法写法：
class="box-1"、class="box1"、class="user_profile" - 非法写法：
class="1box"、class="my box"、class="box!" - 多个类之间必须用**单个空格**分隔，多空格或制表符会被压缩成一个空格，但不推荐依赖这点
JavaScript 操作 class 时，优先用 classList 而非 className
className 是字符串操作，容易覆盖已有类；classList 提供原子级方法，安全可控。
立即学习“前端免费学习笔记（深入）”；
- 添加类：
element.classList.add("active") - 移除类：
element.classList.remove("warning") - 切换类（有则删，无则加）：
element.classList.toggle("hidden") - 检查是否含某类：
element.classList.contains("disabled") - 避免写
element.className += " new-class"—— 它会在末尾拼接，可能产生重复或多余空格
样式冲突时，class 的特异性比标签选择器高，但低于 id
比如 p { color: red; } 和 .text-blue { color: blue; } 同时作用在一个 <p class="text-blue"> 上，最终是蓝色——因为类选择器特异性（0-1-0）高于标签选择器（0-0-1）。
- 不要指望靠堆砌多个相同类名来“加强”权重，
.btn.btn.btn和.btn权重完全一样 - 真要覆盖第三方样式，优先加更具体的路径，比如
article .btn，而不是滥用!important - 多个类共存时，CSS 规则按**书写顺序**覆盖，后写的同权重规则生效
真正容易被忽略的点是：class 不只是“套样式”，它是 HTML、CSS、JS 三方协作的契约接口。写错一个类名，可能让 JS 找不到节点、CSS 失效、甚至影响可访问性工具识别——所以命名要一致、拼写要准确、变更要同步更新三端代码。
