bem命名使事件委托的matches()选择器具备组件归属、元素角色、状态三重语义，提升可读性与精准度，避免模糊匹配，需配合工具链保障一致性并规避命名失焦等陷阱。
事件委托本身不依赖类名规范，但用 bem 命名后，matches() 的选择器就能“一眼看懂意图”，不用翻 html 或 js 就能确认它监听的是哪个组件、哪个状态、哪类交互。
让 matches 选择器自带上下文语义
BEM 类名把归属、角色、状态全编码进字符串里，matches('.user-card__avatar--loading') 比 matches('.avatar.loading') 多出三重确定性：它属于 user-card 组件、是其 avatar 元素、当前处于 loading 状态。这种可读性直接降低调试成本——看到匹配结果，立刻知道该查哪个模块的 JS 逻辑。
-
避免模糊匹配：不用写
matches('[class*="avatar"]')或matches('.loading')这类全局污染型选择器 -
精准定位行为边界：点击
.product-item__add-to-cart触发购物车逻辑，绝不会误捕.header__cart-icon -
状态切换即选择器变更：JS 控制
el.classList.toggle('button--disabled')后，matches('.button--disabled')自然失效，无需额外清理监听逻辑
在事件委托中安全使用 Modifier 和 Element
BEM 的修饰符（--）和元素（__）不是装饰，而是行为契约。委托时优先用完整 BEM 类名做判断依据，而不是靠父级 class 或 data 属性兜底。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
只监听明确归属的 Element：用
matches('.card__close')，而非matches('.close')—— 后者可能匹配弹窗、侧边栏、表单多个 close 按钮 -
Modifier 表示可响应的状态分支：例如
if (e.target.matches('.button--primary')) { track('click_primary') }，比if (e.target.classList.contains('primary'))更可靠 -
禁止跨 Block 混用：不写
matches('.modal .button')，而应确保按钮自身带modal__trigger或button button--modal-trigger
配合 JS 工具链保障一致性
手写 BEM 类名易出错，一旦 matches() 里的字符串和实际 class 不一致，事件就静默失效。必须靠工具链守住底线。
-
用
clsx或cn控制类名拼接：避免el.classList.add('card__body' + '--' + state)这种易错写法 -
Stylelint + 自定义规则拦截非法类名：配置
selector-bem-pattern，让.btn-primary或.card-title在保存时就报错 -
在测试中验证 matches 行为：例如模拟点击
.search-form__submit--loading，断言是否触发预期 handler，防止命名重构后逻辑断裂
常见陷阱与规避方式
很多团队写了 BEM 类名，但 matches() 还是难读，问题往往出在命名失焦或 JS 使用惯性上。
-
别用位置词干扰语义：拒绝
matches('.sidebar__btn')，改用'.nav-button'或'.sidebar__trigger'，让类名表达“做什么”而非“在哪” -
Modifier 不叠加，状态才可控：不写
matches('.button--primary--loading')，而用两个独立判断：matches('.button--primary') && matches('.button--loading') -
Element 必须依附 Block 存在：如果
.card__footer在非 card 容器里被复用，说明它该升格为独立.footer-block，否则matches()会失去上下文锚点
