bem 的 block__element 不能写成 block element，因空格会被解析为后代选择器，导致语义错误和样式失效；必须用双下划线连接，禁用空格、连字符或驼峰命名。
为什么 BEM 的 block__element 不能直接写成 block element
因为浏览器会把空格当成后代选择器，.card__title 和 .card .title 完全是两回事：前者匹配元素本身带这个类，后者匹配 .card 内部任意层级的 .title。一旦嵌套结构变动，样式就失效或误击。
实操建议：
- 所有 BEM 元素类名必须用双下划线连接，禁止空格、连字符或驼峰（如
cardTitle） - 避免在元素上叠加语义类（如
card__title is-large），改用修饰符card__title--large - 如果需要覆盖某元素的默认样式，优先扩展修饰符，而不是加新类或内联样式
如何让 block__element--modifier 真正只影响当前块内的元素
BEM 修饰符失效最常见的原因是 CSS 优先级被父级或全局样式劫持。比如 .button--primary 在某个弹窗里不生效，往往是因为弹窗组件用了 !important 或更宽泛的选择器（如 .modal * { color: #333 }）。
实操建议：
- 所有修饰符规则必须带上完整块前缀：
.button--primary是错的，.button.button--primary或.button--primary（配合 BEM 命名约束）才对 - 避免使用
body或布局类（如.container）作为修饰符作用域——BEM 不依赖 DOM 结构，只依赖类名 - 用
devtools检查计算样式时，重点看“匹配的规则”里有没有被更高优先级的规则覆盖，而不是只看类名是否存在
多个 BEM 块嵌套时，block1__element 和 block2__element 能共用 CSS 吗
可以复用，但不能靠“碰巧同名”，必须显式提取。比如 header__logo 和 footer__logo 都是 logo，但它们属于不同块，CSS 规则不能混用，否则改一个会影响另一个。
实操建议：
- 提取公共样式时，用工具类（utility class）而非共享元素类名，例如
u-text-center、u-margin-small - 如果两个块确实需要完全一致的子元素行为（如都用
icon），可定义原子级块icon，再让header__icon和footer__icon继承它（通过@apply或 CSS 自定义属性） - 禁止用
[class*="__icon"]这类属性选择器做“自动复用”，它破坏命名意图，且无法静态分析
用 PostCSS 或 SCSS 写 BEM 时，&__element 展开后为啥多了一层嵌套
因为预处理器会忠实展开嵌套语法，.card { &__title { ... } } 编译出来是 .card .card__title（注意中间是空格），这不是 BEM 要求的独立类名，而是后代选择器，性能差、可维护性低、还容易漏掉类名绑定。
实操建议：
- SCSS 中必须用
‑‑title（双短横）或#{$block}__title字符串拼接，禁用&__title - PostCSS 插件如
postcss-bem可以自动补全，但要确认它生成的是独立类选择器，不是嵌套结构 - 上线前用
grep -r "__" dist/css/ | grep " "快速扫一遍是否有空格残留
真正难的不是写对名字，而是当团队多人协作、组件跨项目复用时，守住“块之间零隐式耦合”这条线——类名一松动，后续所有样式隔离、主题切换、微前端样式沙箱都会出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
