bem类名必须带块前缀（如user-card__avatar），因其是所有权声明，明确“这是谁的avatar”，避免样式跨模块泄漏；不带前缀的btn或card在中大型项目中会失控，导致样式污染与维护灾难。
为什么BEM类名必须带块前缀，不能只写btn或card
因为不带块前缀的类名会立刻在中大型项目里失控。你写的btn，可能被登录页、弹窗、表单、侧边栏同时复用，改一个颜色就全崩。BEM强制把上下文“焊”进类名，比如header__search-btn和product-card__add-to-cart-btn，哪怕都渲染成按钮，样式也互不干扰。
常见错误是把btn--primary单独拎出来当全局修饰符用——结果运营页一加btn--primary，后台系统的按钮也跟着变蓝。真正合规的是header__search-btn--primary或product-card__add-to-cart-btn--primary，修饰符必须依附于具体块。
- 所有
__element和--modifier必须从block开始，中间不能断层 - 禁止跨块复用元素名：
button__text和card__text必须是两个独立类，不能共用text - VS Code插件BEM Helper能补全，但拦不住手写漏掉块名，上线前建议用正则
/\b__(?!.*__)/扫一遍是否所有__前面都有合法块名
card__title为什么不能写成card title（带空格）
浏览器会把空格解析为后代选择器，.card .title和.card__title完全是两回事。前者依赖DOM结构：只要title被套进一层新div，样式就失效；后者只认类名本身，挪到哪都生效。
更隐蔽的问题是预处理器陷阱。SCSS里写.card { &__title { ... } }，编译结果是.card .card__title（注意中间空格），这已经违背BEM原则。它既降低性能（后代选择器比单类慢），又让card__title无法脱离card单独使用。
- SCSS中必须用字符串拼接：
#{$block}__title，禁用&__title - HTML里务必写
class="card__title"，不能拆成class="card title" - 检查DevTools的“Computed”面板，如果
card__title的样式靠继承得来（比如靠card设了font-family），说明没显式声明，脱离上下文就会失效
嵌套深的组件（如表单里的输入+校验提示）怎么避免BEM类名爆炸
深层嵌套不等于要堆砌长串类名。BEM的关键原则是：每个视觉上可独立存在的UI单元，都应是一个Block。比如带校验的输入区，别硬塞成form__field__input__error，而是拆成两个Block：input-field和validation-message。
这样input-field--error只控制输入框状态，validation-message--error只管提示文案样式。改提示文案，动validation-message相关规则就行，不影响input-field的任何逻辑。
- 禁止
form__field__input__error这种四层命名，BEM只允许block__element或block__element--modifier两级 - 如果某个子部件确实需要复用（比如图标），定义原子级Block：
icon，再让header__icon和footer__icon继承它 - 不用
[class*="__icon"]这类属性选择器“自动复用”，它破坏命名意图，且构建工具无法做静态分析
如何验证BEM模块是否真的可复用
光有命名不够。真正可复用的BEM模块，得满足三个硬条件：所有__element和--modifier类名在同一份文档里明确定义；CSS文件不含任何全局重置（比如h1 { margin: 0; }）；提供最小HTML结构示例，并注明哪些class可组合、哪些互斥。
比如一个button模块，必须明确写出：<button class="button button--primary button--large">提交</button>，并标注button--primary和button--secondary互斥，但可与button--large叠加。
- 如果模块含JS行为（如
button--loading），必须同步定义对应JS触发逻辑，否则CSS只是摆设 - 构建工具如Webpack可能缓存旧CSS chunk，改完类名后要清掉
node_modules/.cache和dist再构建 - 用DevTools右键禁用某条规则，看是否立即消失——如果没反应，说明那条规则根本没匹配上，或者被更高权重的选择器覆盖了
className，所有隔离效果都建立在团队对block边界的共识之上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
