现代浏览器不支持 :match() 伪类，它根本不存在于 CSS 规范中；所有相关说法均源于混淆 :is()、:where() 或已废弃的 :matches()，以及误将 JS 方法名或 PostCSS 内部函数当作原生特性。
现代浏览器不支持用 :match() 优化 BEM 选择器——它根本不存在。CSS 规范里没有 :match() 这个伪类，所有声称靠它“加速 BEM”的方案都是误传或混淆了 :is()、:where() 甚至已废弃的 :matches()（旧名，现为 :is()）。
为什么搜不到 :match() 文档
你查 MDN、caniuse 或 CSSWG 官方草案，都找不到 :match()。它不是标准，也不在任何浏览器实现中。常见混淆来源有三个：
- 把
:is(a, .btn, [data-role])误写成:match(...) - 把 JavaScript 的
element.matches(selector)方法名错当成 CSS 伪类 - 某些过时博客把 PostCSS 插件的内部函数名当成了原生 CSS 特性
:is() 和 :where() 能不能用于 BEM
能写，但会破坏 BEM 的核心性能优势——它们本身不慢，但掩盖了真实选择器结构，且无法规避回溯逻辑。
-
:is(.header__logo, .footer__logo)编译后仍是两个独立单类匹配，不影响性能 -
:is(.card .card__title, .modal .modal__title)❌ 一旦含空格，就退化为后代选择器，触发 DOM 回溯 -
:where()同理，权重归零是优点，但不改变匹配路径：含空格照样慢 - Safari 15.4+ 才支持
:is()，旧版 iOS WebViews 会直接忽略整条规则
真正该检查的 BEM 选择器硬指标
BEM 的性能只取决于最终注入到页面里的字符串是否为单类名。其他全是干扰项。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Elements → 选中一个带
form__input--error的元素 → 右侧 Styles 面板里点开对应规则 → 确认选择器字段显示的是.form__input--error，而不是.form .form__input--error - 构建后执行
grep -r "\.[a-z]\+ \.[a-z]" dist/（Linux/macOS），命中即表示存在嵌套泄漏 - 禁用所有
@at-root滥用，尤其@at-root (without: rule)容易把修饰符拖进全局作用域，产出意外的空格选择器 - Vue SFC 中
<style scoped>默认编译为.btn[data-v-abc123]，这是属性选择器，比纯类名略慢；如需极致性能，应配合同步移除 scoped 属性或改用<style module>
最容易被忽略的是：BEM 类名长度不影响匹配速度，但一旦你在 Sass 里写 .card { &__title { @at-root (without: rule) { color: red; } } }，就可能让 .card__title 脱离上下文、意外参与全局样式竞争——此时 class 名再“规范”，也救不回选择器结构的崩坏。
