: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()，而是拆解责任：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

• 外层容器或命名空间（如 .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)。问题有二：

• :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 就能把它盖掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！