id是唯一标识，class是复用标签；id用于锚点、label绑定和高频JS访问，class适用于样式复用、组件化开发及行为解耦，重复id会导致getElementById返回首个匹配元素且难以排查。
id 是唯一标识，class 是复用标签；绝大多数样式和交互逻辑该用 class，id 只在必须唯一锚定的场景才用。
什么时候 document.getElementById 会返回错误结果
当页面中出现重复 id 时，document.getElementById("xxx") 总是返回第一个匹配的元素，后续同名 id 完全被忽略——浏览器不报错，但行为不可控。这种问题在线上环境极难排查，尤其在拼接模板、动态插入 DOM 或多人协作时容易发生。
常见诱因包括：
- 服务端渲染与客户端 hydrate 不一致，导致重复挂载同一组件
- Vue/React 组件未处理好 key 或 id 生成逻辑，多个实例共用静态
id="modal" - 复制粘贴 HTML 片段后忘记改
id值
替代方案：优先用 document.querySelector(".js-submit-btn") 或 document.querySelectorAll(".error-message")，它们不依赖唯一性，语义更清晰。
立即学习“前端免费学习笔记（深入）”；
为什么 CSS 中 #header 比 .header 更难维护
#header 的特异性（specificity）是 0,1,0,0，而 .header 是 0,0,1,0；这意味着哪怕你写十个连写的 class 选择器，也压不过一个 #header 的声明。一旦第三方库或后续模块引入了 #header 样式，你就只能靠 !important 或更高权重选择器硬覆盖——这直接破坏样式可预测性。
更现实的问题：
- BEM 类名如
.header__logo可以安全嵌套、组合、条件添加，id无法做到 - 组件化开发中，
id无法通过 props 动态生成又保证唯一，class 则天然支持 - 测试时模拟点击
label[for="email"]依赖id正确绑定，但样式调试却常因id权重失控而失败
label for 和锚点跳转为什么非用 id 不行
这是少数几个 id 不可替代的场景：
-
<label for="email">邮箱</label><input id="email">：浏览器强制要求for属性值必须严格匹配某元素的id，class 不生效 -
<a href="#section2">跳转</a><section id="section2">内容</section>：锚点机制底层只认id，class 无法触发滚动定位 -
<canvas id="game-canvas">：高频 JS 访问单个画布时，getElementById是目前最快路径，比 querySelector 略快且无歧义
注意：id 值仍需遵守命名规范（不能以数字开头、不能含空格或特殊符号），否则锚点或 JS 获取会静默失败。
class 多值写法和 BEM 实际怎么用
一个元素可以同时拥有多个 class，用空格分隔，例如：class="btn btn--primary js-modal-trigger"。这种写法不是炫技，而是分工明确：
-
btn：基础样式（padding、border、font-size） -
btn--primary：修饰状态（背景色、文字色） -
js-modal-trigger：纯行为标记，CSS 里不写样式，只供 JS 绑定事件
这样做的好处：
- 样式和行为解耦，删掉
js-modal-trigger不影响外观 - 避免写
[data-behavior="modal"]这类冗长属性，class 更轻量 - 团队协作时，看到
js-开头的 class 就知道“别动这个，是 JS 钩子”
最容易被忽略的是：class 名必须语义化。写 class="red-big-text" 看似省事，但换主题时得全局搜替换；而 class="error-message" 既说明用途，又方便未来加动画、响应式等扩展。
