bem 用 __ 而非 . 或空格因浏览器匹配效率更高且保障语义隔离：.card__title 是单类名，哈希表一次命中；而 .card .title 需向上回溯父级，且易被其他模块误改。
为什么 BEM 用 __ 而不是 . 或空格写子元素？
因为浏览器匹配效率和语义隔离直接挂钩。写成 .card .title，CSS 引擎就得先找所有 .title 元素，再逐个往上查父级是否含 .card；而 .card__title 是单类名，哈希表一次命中。更重要的是，.title 可能被其他模块复用或误改，但 .card__title 天然绑定作用域——它只属于 card 块，搜字符串就能定位全部使用点。
常见错误现象：
- 在 Sass 中误写
& .card__subtitle（带空格），编译出.card .card__subtitle，破坏 BEM 单类名优势 - 把
.header__logo拷到 footer 里复用，却没把它升格为独立 block，导致语义错位
-- 修饰符为什么必须是双横杠，不能用 - 或 _？
这不是风格偏好，而是工具链识别基础。PostCSS 插件、Stylelint 规则、VS Code 类名跳转都靠 -- 精确识别 modifier 段。用 button-loading 或 button_loading，IDE 就无法区分这是 modifier 还是普通单词拼接，自动化检查也会漏报。
使用场景限制：
- 修饰符必须描述稳定状态，比如
button--disabled✅，button--left❌（响应式下位置可能变） - 不能塞具体值：
card--width-300px❌，应抽象为card--compact✅ - 多个动画状态要分拆：
tab--enter-active和tab--leave-active，别用 JS 拼接类名
嵌套超过一层的类名，比如 card__header__title，为什么是反模式？
BEM 明确禁止 Element 嵌套 Element。一旦出现三层结构，说明设计已失控：要么 header 本该是独立 block，要么 title 已具备跨上下文复用能力，该单独抽离。
判断依据很实在：
- 这个类是否在其他 DOM 结构中出现过？
- 是否需要单独写文档、测试用例、或被其他团队引用？
- 如果删掉
card容器，header还能不能独立存在？
真遇到复杂子结构，就该拆：把 card__header__title 改成 header__title，让 header 成为新 block。
BEM 类名再规范，为什么样式还是覆盖错了？
因为 BEM 只管命名，不管层叠顺序。比如 .card__title--large 和 .card__title--small 冲突，问题不在名字，而在 CSS 文件引入顺序、或是否被 !important 干扰。更隐蔽的是伪 BEM：HTML 写了 class="card card--featured"，但 CSS 只定义了 .card--featured，漏掉基础 .card 样式，删 modifier 就全崩。
最容易被忽略的一点：BEM 不解决加载时序。你得用构建工具控制 CSS 输出顺序，或用 CSS-in-JS 的 scope 机制兜底，光靠命名救不了层叠问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
