class是为多个元素复用样式的唯一合理路径，因ID必须唯一、内联样式不可复用、标签选择器易冲突；命名应语义化如“header-logo”，避免“red”等表现式名称；批量应用优先用模板引擎或组件封装而非JS动态添加。
用 class 属性是为多个元素复用相同样式的标准做法，不是“可选方案”，而是唯一合理路径——ID 不可重复、内联样式无法复用、标签选择器太宽泛且易冲突。
为什么不能用 id 代替 class？
id 在 HTML 中必须唯一，浏览器和辅助技术都依赖这一约束。即使 CSS 渲染看似“生效”，实际已违反规范：
- JavaScript 中
document.getElementById()只返回第一个匹配元素，后续逻辑必然出错 - 屏幕阅读器可能跳过重复
id，影响可访问性 - W3C 验证器报错，CI/CD 流程中可能被拦截
别图省事写两个 id="btn"，这等于埋了个静默故障点。
class 名该怎么起才不踩坑？
命名不是随便拼词，它直接影响维护成本和协作效率：
- 避免语义模糊的名称，如
class="red"或class="big"——颜色/尺寸变更是高频需求，这类名会迅速失效 - 优先采用 BEM 或功能导向命名，例如
class="header-logo"、class="form-submit-btn" - 多个 class 共存时用空格分隔，不要连写：
class="btn btn--primary"✅，class="btn-primary"❌（后者丧失组合灵活性）
一个 class 应表达“它是什么”，而不是“它长什么样”。CSS 负责外观，HTML 负责结构语义。
批量加 class 的实操方式有哪些？
手动逐个写 class="xxx" 是下策。根据场景选更可持续的方式：
- 静态页面：用编辑器多光标（VS Code 按住
Ctrl+ 点击多处）或正则替换，例如把所有替换为 - 模板引擎（如 Jinja2、EJS）：提取公共 class 到变量或宏，避免硬编码重复
- 前端框架（React/Vue）：封装成组件，class 由组件内部固化，调用时无需重复声明
- JavaScript 动态添加：慎用
document.querySelectorAll("input, select, textarea").forEach(el => el.classList.add("form-control"))——仅适用于初始化，不推荐用于核心样式定义
记住：class 批量应用的本质是“结构层面的复用”，不是“运行时打补丁”。能用 HTML 和 CSS 解决的，就别拖到 JS 层。
最常被忽略的一点：class 复用的前提是 DOM 结构合理。如果一堆本该语义化为 、 的元素全靠 class="section" 勉强撑着，再好的 class 命名也救不了可维护性。
