id选择器权重固定为100，远超类选择器组合；应将id仅用于js操作和语义锚点，样式全交由bem类驱动，禁用id在css中出现，避免权重干扰。
ID选择器权重固定为100，单个就压过所有类组合——这不是bug，是CSS规范设计如此。想靠多写几个class覆盖#header .btn？没用，40 vs 100，差得远。
为什么改了.class颜色却没生效
DevTools里看到你的规则被划掉，点开「Computed」面板，大概率会看到类似#user-modal .modal__close这样的来源，权重110；而你写的.modal__close--disabled只有10。不是代码写错了，是浏览器按四元组(a,b,c,d)比大小，b=1（ID个数）直接卡死高位。
- 第三方组件（如
el-dialog）内部用了#dialog-root，你的.dialog__content根本匹配不上目标元素 - 写了
.btn--loading，但父级#sidebar-nav .btn锁死了所有子状态样式 - JS里用
document.getElementById('main')取元素，顺手在CSS里也写了#main——结果样式和逻辑绑死，无法复用
把ID从CSS里彻底移出去
ID该留在HTML里，但不该出现在CSS文件中。这不是删代码，是重定向职责：ID归JS和语义用，样式全交给类驱动。
- 把原CSS中所有
#main、#nav这类规则，全部替换成带BEM前缀的类，比如.layout__main、.nav__container - HTML中对应元素显式加上这个类：
<div id="main" class="layout__main">——ID和class共存，但CSS只认后者 <li>JS里定位不再用<code>document.getElementById('main')，改用document.querySelector('.layout__main')；现代框架中直接用ref或useRef - 锚点跳转保留
id="section2"，但确保目标元素同时有class="section section--2"，CSS只对.section--2生效 - 禁用
.card .card__title：这是两个独立类选择器叠加，权重20；正确写法只有.card__title单独一条规则 - 别用标签限定：
h3.card__title权重是11（标签1 + 类10），而纯.card__title是10 - 修饰符不叠用：
.button--primary.button--large权重20，应合并为.button--primary--large，或拆成独立状态规则 - 避免用
:where()包裹多个类来“降权”——它确实权重为0，但仅适合归一化基础样式（如:where(.header__logo, .footer__logo)），不能用于状态类 - 锚点跳转：
<a href="#section2"></a>必须依赖id="section2"，但对应<section id="section2" class="section section--2"></section>，样式只走.section--2 - 表单关联：
<label for="email"></label>需要id="email"，但输入框样式写.form-input，不碰ID - ARIA属性：
aria-labelledby="header-title"需要ID，但#header-title只做语义标识，不参与CSS匹配
类选择器怎么写才不会悄悄拉高权重
BEM本身不保权重低，关键是你怎么组合。很多“看起来合理”的写法，实际把权重翻倍了。
哪些场景真需要ID，又怎么避开权重干扰
ID不是敌人，只是用错了地方。它在JS操作和语义锚点上依然不可替代。
真正难的不是怎么提权，而是哪部分该保权、哪部分该弃权——ID的100分，只该花在它真正不可替代的地方，而不是当样式杠杆使。
