:where()在BEM中失效主因是整条规则权重归零，应仅包裹可被覆盖的部分（如标签、布尔修饰符），外层命名空间需保留权重，且须注意Safari兼容性与加载顺序。
为什么直接套:where()在BEM类上反而失效
常见错误是写成 :where(.header__title--large) 或 :where(.btn .btn--primary)。这会让整条规则权重变成 0-0-0，连浏览器默认的 h1 标签样式都压不过——更别说覆盖业务层加的 .header__title--large.modifier 了。它不是“变弱”，是直接归零，匹配成功但没机会生效。
:where()在BEM中只该包“可被接管”的那部分
BEM 的语义优势在于结构清晰，但它的链式写法（如 .block__element--modifier）天然带权。想让它易覆盖，关键不是把整个 BEM 类名塞进 :where()，而是拆解责任：
- 外层容器或命名空间（如
.my-app、[data-theme]）必须保留权重，提供层叠起点 -
:where()只包裹你明确允许“被业务代码无条件覆盖”的部分：通常是元素名、状态属性或布尔修饰符 - 例如：
.card :where(h2, p, button)——.card提权，内部标签归零；又如：.form :where([disabled])，不碰.form__input--error这类强语义类
和:is()混用时最容易翻车的BEM场景
有人想统一控制所有 BEM 元素的 hover 行为，写了：:where(.btn) :is(:hover, :focus)。问题有二：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
:where(.btn)权重为 0，但它仍会全局匹配页面任意位置的.btn，无法做“仅限当前区块”隔离 -
:is(:hover, :focus)权重取最高值（即 0-0-1），整条规则最终权重仍是 0-0-1，远低于.btn:hover（0-0-2） - 真正安全的写法是：
.btn :where(:hover, :focus)—— 外层.btn贡献权重，内部伪类归零，整体可控
上线前必须验证的三个兼容性盲点
:where() 在 BEM 场景下尤其依赖解析稳定性，旧版 Safari（如 15.2）会静默失效，且 CSS.supports('selector(:where(a))') 返回 true 并不等于渲染正确：
立即学习“前端免费学习笔记（深入）”；
- 必须在真实设备上测试 Safari 15.4 以下版本，不能只信
@supports检测 - 避免嵌套：
:where(.block__element):where(--modifier)是无效语法，第二层:where()直接被忽略 - 伪元素（如
::placeholder）不能放进:where()，BEM 中若用到.input__field::placeholder，这部分得单独写降级规则
:where() 规则必须放在自定义 BEM 样式表最前面，否则它归零后，后面一条简单的 .block__element 就能把它盖掉。 
