id选择器在css中禁用，因其权重100破坏样式可控性：导致覆盖失效、不可复用、组件隔离崩溃；bem等方法论强制权重统一为0,1,0，而#header使.button--primary等类名失效，且重复id在react/vue中引发js逻辑中断与ssr失败。
ID选择器在CSS中不是“不能用”，而是它一出现，就立刻让样式系统失去可控性——权重100、不可复用、破坏组件隔离，所有现代CSS方法论（BEM、ITCSS、CSS Modules）都默认将其列为禁用项。
为什么#header会让.button--primary失效
CSS权重是硬计分：一个#id = 100分，一个.class = 10分。#header .button--primary直接变成110分，而.theme-dark .button--primary只有20分。浏览器不看逻辑，只按数字算——哪怕你把后者写在CSS文件最底下，也压不过前者。
- 调试时加
!important能临时压过，但上线后忘了删，别人再想覆盖就得写!important !important（无效），或再套个#app强行提权，形成恶性循环 - BEM规范要求所有样式权重统一为0,1,0（单个类），
#header直接打破这个前提，后续所有修饰符（如.button--large）、主题扩展（如.is-disabled）都会被卡死 - DevTools的Styles面板里点开specificity值，一眼就能看出是不是被ID规则锁死了
重复id="modal"在React/Vue里会直接断逻辑
HTML规范强制id全局唯一，但组件框架常需同一页面渲染多个实例——比如两个弹窗、三个表单。一旦都写id="modal"，后果是确定性的：
- CSS只作用于第一个匹配元素，其余弹窗样式丢失
-
document.getElementById('modal')永远只返回第一个，JS事件监听、关闭逻辑全部中断 - 服务端渲染（SSR）时hydration失败，React/Vue控制台报
Did not expect server HTML to contain a <div> with id="modal" <li>测试脚本靠<code>getElementById查元素，CI环境因DOM动态生成顺序不同而随机失败 - 表单可访问性：
label[for="email"]必须对应<input id="email">，否则屏幕阅读器无法关联 - ARIA属性：
aria-labelledby="tooltip-1"依赖ID的唯一性，但它不参与样式计算 - 锚点跳转：
<a href="#section2"></a>和<h2 id="section2"></h2>配对使用，纯HTML语义，与CSS无关
哪些地方看似必须用id，其实可以安全替换
ID在HTML中可以存在，但只要不进CSS选择器，权重问题就不存在。真正不可替代的只有三类场景：
其他所有用途——样式钩子、JS操作入口、测试定位——都该交给class或data-属性：data-testid="save-button"比id="save-btn"更健壮，.js-modal-toggle比document.getElementById('modal-toggle')更符合现代实践。
重构老项目时最容易踩的坑
不是删#sidebar-nav本身难，而是删完之后：document.getElementById('sidebar-nav')还在JS里调用，功能立刻断；或者第三方插件CSS里藏着#app .user-card这种高权重组合，你删了#app，整个卡片样式就崩。
正确路径是：先确保所有CSS已脱离ID（用stylelint-selector-bem-pattern插件CI拦截），再清理JS里的getElementById调用，最后才动HTML里的id属性——顺序反了，就是线上事故。
