ID选择器会直接破坏BEM权重平衡，因其权重为1,0,0，远超BEM要求的0,1,0；浏览器按特异性数字硬算，导致后续类名样式难以覆盖，修饰符和状态切换失效。
为什么ID选择器会直接破坏BEM的权重平衡
BEM要求所有样式规则权重统一为 0,1,0（单个类名），而 #header 是 1,0,0，浏览器按数字硬算——哪怕你把 .button--primary 写在它后面，也压不过。更糟的是，#header .button--primary 权重跳到 1,1,0，后续所有修饰符、主题扩展都得靠 !important 或再套 ID 强行提权。
常见错误现象包括：#app .user-card__avatar 看似只是加个根容器，实际已把权重拉高；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的选择器
真正省事的做法，是在 ESLint + stylelint 中启用 stylelint-selector-bem-pattern 插件，配置 allowedSelectors: ["class"]，CI 直接拦截含 # 的规则。
立即学习“前端免费学习笔记（深入）”；
PostCSS 用户可用 postcss-bem-linter，配置后能捕获类似这样的错误写法：
#product-page .product-card__title { font-size: 1.5rem; }
并提示改为：
.product-card__title[data-page="product"] { font-size: 1.5rem; }
重构旧项目时最容易踩的坑
别急着删 ID，先确保所有 CSS 规则已脱离它；否则 #sidebar-nav 删了，但 JS 还在用，功能就断了。
团队落地最难的不是记住“别用 ID”，而是敢不敢在第一次提交时，把那行 #sidebar-nav 从 CSS 里删掉——这个动作看似微小，却决定了后续所有组件迁移、状态管理是否还能保持低权重、无冲突。
