ID是页面唯一标识，class是可复用分类标记；id必须全局唯一，重复会导致getElementById只返回首个元素、label绑定失效、ARIA关联紊乱；class支持多实例复用与组合，适用于样式和批量JS操作；非唯一性场景应优先选用data-*属性替代。
ID 是页面内唯一标识，class 是可复用的分类标记；不是“哪个更好”，而是“该用哪个”——用错地方，后期改起来全是坑。
id 必须唯一，但浏览器不报错
一个页面里出现两个 id="header"，HTML 合法，浏览器不会中断渲染，也不会在控制台报错。但后果很实在：document.getElementById("header") 永远只返回第一个匹配元素；<label for="email"> 找不到对应 input 时焦点绑定失效；aria-labelledby="status" 引用的目标若重复，屏幕阅读器可能静默跳过。
常见错误现象：
- Vue/React 多个相同组件挂载后生成重复
id，无障碍检测工具（如 axe）直接标红 - 服务端渲染（SSR）中动态生成的
id在客户端 hydration 时冲突，导致 JS 逻辑取到错误节点 - 用
id="btn-1"、id="btn-2"给列表项编号，结果样式要统一改，只能写#btn-1, #btn-2, #btn-3 { ... }或硬套!important
class 支持复用和组合，是样式与 JS 批量操作的事实标准
你写 class="btn btn--primary js-modal-trigger"，就同时满足了 CSS 复用、BEM 命名、JS 功能绑定三个需求。而 id 无法做到这点——它天生就是单点定位的。
立即学习“前端免费学习笔记（深入）”；
使用场景差异明显：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 需要统一控制一组按钮样式？用
class="btn"，别用一堆id="save-btn"id="cancel-btn" - 要给多个卡片加点击展开逻辑？绑定
document.querySelectorAll(".card")，而不是靠id逐个查 - 组件库内部需要隔离样式？
class="tooltip__arrow"比id="tooltip-arrow-123"安全得多
性能上，现代浏览器对 getElementsByClassName 和 querySelectorAll(".xxx") 的优化已非常成熟，所谓“id 更快”在真实项目中几乎感知不到，反而滥用 id 会让 CSS 权重失控（#nav 权重 0,1,0,0，覆盖它得用 body #nav 或更高阶组合）。
哪些地方非用 id 不可
不是“能用 class 就不用 id”，而是某些功能底层依赖 id 的唯一性，绕不开：
- 锚点跳转：
<a href="#section3">→<div id="section3"> -
<label for="username">必须指向一个id="username"的表单控件 - ARIA 关联：
aria-describedby="error-456"要求目标元素存在id="error-456" - 旧版 IE 中直接用
username.value访问元素（已淘汰，但遗留代码里还能见）
注意：name 属性不是替代品——<input name="email"> 决定表单提交字段名，跟 DOM 查找无关；for 属性只认 id，不认 name。
data-* 属性才是真正的“语义化 ID 替代方案”
想给列表项编号又不想污染 id？用 data-id="7"。想标记某元素属于“支付流程第二步”？用 data-step="2"。它不参与样式权重，不影响无障碍，也不被浏览器强制校验唯一性，JS 里用 element.dataset.id 或 [data-step="2"] 选择器就能精准抓取。
容易被忽略的关键点：
-
id值不能含空格、点号、括号等 CSS 非法字符；data-属性值无此限制 - 服务端渲染时，
id重复会引发不可靠行为；data-属性重复完全无害 - 组件封装时，用
data-component="dropdown"比id="dropdown-1"更利于多实例共存
真正难的不是记住区别，而是每次写 id 前下意识问一句：这个值会不会在多个地方出现？有没有更轻量、更语义的替代方式？
