.card .title破坏BEM模块边界，因其依赖DOM层级而非作用域隔离；而.card__title自带独立作用域，不依赖上下文，避免样式误匹配、复用失效及渲染性能下降。
为什么 .card .title 会破坏 BEM 的模块边界
BEM 的核心不是“写得像模块”，而是让每个类名自带作用域——.card__title 能脱离任何父容器独立存在，而 .card .title 依赖 DOM 层级，一旦嵌套结构变化或被复用到其他上下文，样式立刻失效或误匹配。
常见错误现象：
- 把第三方组件（如
react-datepicker）直接塞进.card，结果.card .input意外覆盖了日期控件内部的.input - 两个团队各自写了
.button，但都用.form .button控制尺寸，上线后互相覆盖，没人知道谁先加载 - 重构时把
.section-card改成.feature-card，所有.section-card .title全挂
子选择器在浏览器匹配时到底多慢
CSS 是从右往左匹配的。.card .title 要先找所有 .title，再逐个向上查父元素是否含 .card；而 .card__title 只需一次哈希查找——现代浏览器对单类名优化极好，但后代选择器触发回溯，尤其在移动端或低端设备上可测出明显渲染延迟。
性能影响不是理论：当你有 200+ 个 .list-item .text 这类规则时，DevTools 的 “Layout” 阶段耗时会跳升，且无法被 CSS 压缩工具（如 cssnano）有效合并。
Sass 中误用 & 嵌套导致隐式后代选择器
很多人以为 .card { &__title { ... } } 安全，但一旦写出 .card { &__content { &__item { ... } } }，编译结果就是 .card__content__item ——这违反 BEM 原则（Element 不该嵌套 Element），更糟的是，有人顺手改成 .card { &__content { .item { ... } } }，就真生成了 .card__content .item。
实操建议：
- 禁用
@at-root (without: rule)，它容易把修饰符意外提升到全局 - 用
stylelint-selector-bem-pattern开 strict 模式，CI 拦截>、+出现在 BEM 文件中 - 检查编译后 CSS：全局搜索空格，确认没有
.block .element类型输出
遇到必须用层级控制的场景怎么办
比如表单校验状态需要影响子控件外观，或弹窗内按钮要继承主题色——这时不该妥协写 .modal .button，而是升级语义：
- 把状态提为 Modifier：
.modal--error .modal__button→ 改成.modal--error .modal__button--error - 用 wrapper 隔离第三方：
<div class="form-field--date"><datepicker></datepicker></div>，只对.form-field--date写样式 - 老项目过渡期，用属性选择器临时兜底：
[data-bem="card"] .title，比后代选择器更可控
真正难的不是写对命名，而是当所有人都在赶需求时，还能守住那一层 wrapper 和那个双下划线。一旦松动，BEM 就退化成带前缀的普通 class，模块边界也就消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
