应优先使用 class 而非 id 控制样式，因 id 特异性过高（100分）易导致覆盖困难；id 仅适用于 label[for]、锚点、aria-labelledby、getelementbyid 等依赖唯一性的场景；class 命名须语义化（如 search-submit），避免视觉描述；data-* 属性是更安全的 js/css 钩子替代方案。
别用 id 控制样式，除非你明确需要它的唯一性语义和高特异性——绝大多数视觉表现、状态切换、组件复用，都该交给 class。
为什么 #header 比 .header 优先级高？不是浏览器“偏心”，是特异性计算规则
浏览器不看谁写在后面，只算选择器的“权重分”：#header 是 100 分（id 权重），.header 是 10 分（class 权重）。哪怕你把 .header { color: red; } 放在 CSS 文件末尾，只要元素同时有 id="header" 和 class="header"，且 #header { color: blue; } 存在，最终就是蓝色。
容易踩的坑：
- 用
#nav写导航基础样式，后面想加.nav--sticky覆盖定位时发现不起作用——因为 100 vs 10，压根没机会比 -
#user-form input权重是 100 + 1 = 101，而.form-input:focus是 10 + 10 = 20，焦点样式直接被吞 - 开发者工具里看到样式被划掉，但没注意右侧标的是
#xxx还是.xxx，误以为是顺序问题
什么时候非得用 id 而不是 class？硬性依赖场景只有这几种
不是“能用就用”，而是某些机制根本绕不开 id 的唯一性：
-
<label for="email"></label>必须匹配<input id="email">——for属性值不接受 class 名 - 锚点跳转：
<a href="#section2"></a>依赖页面中存在且唯一的<div id="section2"> <li>A11y 属性如 <code>aria-labelledby="title-desc"，其值必须是真实存在的id字符串 - JS 中调用
document.getElementById("modal-root")获取单个容器节点（注意：不是为了样式，是为了控制） -
class="red-btn"：换主题要全局搜替换 HTML 和 CSS；JS 里判断el.classList.contains("red-btn")实际想表达的是“这是主操作按钮”，但名字完全没体现 -
class="float-left"：布局改成 Flex 后，这个 class 还留着，但语义已失效，团队新人不敢删 - 正确做法：
class="search-submit"（功能）、class="user-avatar"（内容）、class="error-message"（状态） - 工具类需隔离：
class="u-hidden u-text-center"，前缀u-明确表示“纯行为，无业务语义” -
<button data-action="submit"></button>比<button id="submit-btn"></button>更合适——JS 用querySelector('[data-action="submit"]')安全获取，CSS 用[data-action="submit"]选择，权重仅 11（标签+属性），远低于#submit-btn的 100 -
data-component="carousel"可用于多个轮播实例，不会触发唯一性冲突 - Vue/React 组件循环渲染时，硬编码
id极易重复；而data-id="{{item.id}}"天然支持多实例
重复 id 不报错，但会导致 getElementById() 总是返回第一个，aria 关联失效，锚点跳转随机落点——这些都不是样式问题，是功能断裂。
class 命名不是“起个名字就行”，语义错位会拖垮整个维护链
class 是复用的基石，但命名一旦偏向样式或视觉，就会让 CSS、JS、协作全部变脆弱：
BEM 中的 card__header--loading 看似复杂，但每个部分都在回答“它属于哪个块？它是块里的什么元素？当前是什么状态？”——这不是炫技，是防止多人协作时 class 名越写越长、越写越模糊。
data-* 属性才是现代前端更安全的“语义 ID”替代方案
如果你只是想给 JS 或 CSS 提供一个可识别的钩子，又不想承担 id 的唯一性负担和高权重，data- 是更干净的选择：
真正难处理的从来不是单个 id 和 class 的区别，而是当项目跑起来后，有人在 JS 里用 getElementById 读取，有人在 CSS 里用 #xxx 覆盖，还有人在 ARIA 属性里引用同一个 id —— 此时若它被复制了三次，所有地方都会静默失效，且很难一眼定位根源。
