id必须唯一，class可复用；重复id导致getElementById只返回首个、label/ARIA功能静默失效；id适用于锚点、表单绑定、ARIA引用及高频精准JS操作；命名须kebab-case、字母开头、大小写敏感。
id 必须唯一，class 可以复用
浏览器不报错，但重复 id 会让 document.getElementById() 总是返回第一个匹配元素；label 的 for 属性、aria-labelledby 等依赖 id 关联的功能会静默失效。而 class 天然支持多元素共用、单元素多 class（空格分隔），适合样式复用和 JS 批量操作。
常见错误现象：
-
id="btn-submit"被写在多个按钮上 → JS 只控制第一个，表单绑定错乱 - 服务端渲染时动态生成
id="item-{{id}}"，但两个组件实例渲染出相同id→ React/Vue hydration 失败，无障碍检测告警
什么时候非用 id 不可
不是“想选中就用 id”，而是仅当满足以下任一条件时才该用 id：
- 页面内锚点跳转：
<a href="#section3">跳到第三节</a>+<div id="section3"> -
label绑定表单控件：<label for="email">邮箱</label><input id="email"> - ARIA 引用目标：
aria-describedby="error-msg"要求对应元素有id="error-msg" - JS 需要高频、精准访问单个元素（如模态框容器、主内容区）且确定全局唯一
注意：id 在 CSS 中权重为 0,1,0,0，远高于 class（0,0,1,0），滥用会导致样式难以覆盖，尤其在组件化项目里容易冲突。
立即学习“前端免费学习笔记（深入）”；
class 和 id 的命名必须用 kebab-case
别用驼峰（userAvatar）或下划线（user_avatar）——前者易与 JS 变量混淆，后者在旧版 IE 和部分 SSR 工具链中有兼容风险。连字符是唯一安全、通用的分隔符。
关键约束：
-
id必须以字母或下划线开头，不能以数字、中文、短横开头（id="1st-item"非法） -
class和id都大小写敏感：id="Header"≠id="header" -
id含点号或冒号时，JS 中必须转义：getElementById("user\.email")，否则被当 CSS 选择器解析 - 语义优先：用
class="search-input"，不用class="blue-border"；用id="main-content"，不用id="div2"
BEM 风格更适合复杂组件的 class 命名
当组件存在嵌套结构或多种状态时，纯语义名不够用，BEM 提供清晰层级：card 是块（block），card__title 是元素（element），card--hover 是修饰符（modifier）。
好处很实在：
- 避免样式污染：
.card__title不会意外影响其他.title - 状态明确：
button--disabled比button.disabled更易维护 - 工具类需统一前缀：
u-hidden、u-text-center，而非混用hide、hidden、is-hidden
真正难的是坚持——一旦开始用 card__header，就别在同一个组件里突然切回 header-card。命名不是写完就扔的事，它直接决定半年后你改一行样式要 grep 多少文件。
