bem选择器无需降优先级，因其单类名权重恒为（0,1,0）；所谓“需降权”实为误用后代选择器、标签+类组合、双类名脱离语义或sass中滥用嵌套所致；真正应坚守单类名底线、共存严格、加载有序。
为什么BEM选择器不需要降优先级
BEM选择器本身权重就是最低的合法有效值（0,1,0），.button、.button--primary、.button__icon全都是单类名，浏览器匹配快、覆盖逻辑清晰。所谓“要降低优先级”，往往源于两个误判：一是把后代选择器（如.button .button--primary）当成BEM写法，二是用!important掩盖了类名没共存或加载顺序错的问题。
哪些BEM写法会意外抬高权重
真正让BEM“变重”的不是命名长，而是悄悄混入非BEM模式：
-
.card__title:hover—— 伪类本身不增权，但若写成.card .card__title:hover，左侧.card就触发回溯，权重不变但匹配变慢、结构一动就失效 -
button.card__submit—— 标签名+类名组合，权重升为（0,1,1），且换框架（比如用span替代button）样式立刻断裂 -
.card__title.error—— 双类名虽仍为（0,1,0），但.error脱离Block语义，后续无法预测状态组合逻辑 - Sass里滥用
&__item a—— 编译出.card__item a，标签选择器强制全量扫描，性能掉、复用性归零
:where()不是BEM降权工具，是兜底方案
:where()的权重恒为（0,0,0,0），它不适用于BEM主样式链，只适合特定场景：
- 重置第三方库默认样式：
:where(.ant-btn) { padding: 0.5rem 1rem; } - 全局基础元素归一化：
@layer reset { :where(h1, h2, h3) { margin: 0; } } - 旧项目兼容层中“让位”：
:where(.legacy-header .title) { font-size: 1.25rem; }，确保不压过新BEM规则
别写:where(.button--primary)——它权重归零，反而被后面一个普通.button--primary覆盖，纯属自废武功。
真正该做的：守住BEM单类名底线
所有“降权需求”最终都应回归到类名是否干净、共存是否严格、加载是否有序：
- HTML必须同时存在基础块类和修饰符：
class="button button--primary"，不能只写button--primary - CSS文件加载顺序要保证基础类（
.button）在前，修饰符（.button--primary）在后 - 禁止用ID或属性选择器污染BEM链：
#header .button或[data-role="submit"]直接破坏隔离 - 遇到第三方!important，用容器包裹隔离：
<div class="form__submit-wrapper"><antbutton></antbutton></div>，再写.form__submit-wrapper .ant-btn
最易被忽略的是：BEM的扁平权重不是靠技巧维持的，而是靠每次写CSS时，手指敲下的第一个字符就必须是.，后面不能跟空格、不能跟标签、不能跟#——这是纪律，不是风格。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
