ID选择器在BEM中不是写法错误而是破坏根基，因其权重1,0,0碾压类名0,1,0，导致覆盖失效、复用困难、协作对抗；必须将语义ID与样式类彻底分离。
ID选择器在BEM中不是“写法错误”，而是直接破坏样式系统根基——它让所有后续覆盖、复用、协作都变成硬编码式对抗。
为什么#header会立刻让.button--primary失效
BEM要求所有样式规则权重统一为 0,1,0（单个类名），而 #header 是 1,0,0，浏览器按数字硬算：哪怕你写 .button--primary 在它后面，也压不过。更糟的是，#header .button--primary 权重直接跳到 1,1,0，之后所有修饰符、主题扩展都得靠 !important 或再套 ID 强行提权。
- 常见错误：
#app .user-card__avatar看似只是加个根容器，实际已把权重拉高，后续无法用.user-card__avatar--large安全覆盖 - 真实项目里，这种写法往往藏在第三方插件或老代码中，DevTools 的 Styles 面板里 specificity 值一查就露馅
- Vue/React 组件若依赖
#modal，同一页面渲染两个实例时，document.getElementById('modal')只能取到第一个，JS 逻辑直接错乱
哪些地方看似必须用ID，其实可以不动声色替换
ID 在 HTML 中可以存在，但绝不能参与 CSS 匹配。关键在于把“语义锚点”和“样式钩子”彻底分开。
- 服务端渲染首屏 SEO 标签（如
<main id="main-content">）：CSS 里只用.layout__main，JS 用document.getElementById('main-content')取节点，互不干扰 - 需要区分不同上下文的同名组件：改用属性选择器，比如
[data-page="product"] .product-card__price，权重仍是0,1,0，且可读性强 - 无障碍需求（如焦点管理）：用
aria-labelledby="header-title"，它不参与样式计算，也不违反 BEM 的 class-only 原则
团队落地时最容易松动的口子在哪
不是没人知道规则，而是调试时顺手加个 id="debug-btn"，然后在 CSS 里悄悄写上 #debug-btn —— 这个口子一开，新人会默认 ID 可用，接着出现 #Button--primary 这种非法组合。
立即学习“前端免费学习笔记（深入）”；
- 真正省事的做法，是在 ESLint + stylelint 中启用
stylelint-selector-bem-pattern插件，配置allowedSelectors: ["class"]，CI 直接拦截含#的规则 - JS 中定位元素优先用
document.querySelector('.user-card__delete')而非getElementById，类名足够唯一，且不污染样式权重 - 重构旧项目时，别急着删 ID，先确保所有 CSS 规则已脱离它；否则
#sidebar-nav删了，但 JS 还在用，功能就断了
最难的不是记住“别用 ID”，而是敢不敢在第一次提交时，把那行 #sidebar-nav 从 CSS 里删掉——删掉之后，组件才真正开始呼吸。
