BEM类名必须严格遵循块__元素--修饰符三段式，漏掉__或错用--即破坏作用域隔离；所有元素须直属于块、修饰符须与基础类共存、禁止跨块组合或混用工具类，构建链需配置stylelint等工具校验。
怎么写BEM类名才不破坏作用域隔离
BEM不是给类名加下划线的体力活，而是用命名把样式归属钉死。一旦漏掉__或错用--，就等于主动放弃作用域控制权。
-
card__title✅ —— 明确属于card块，哪怕DOM挪到article里也不怕样式串 -
card-title❌ —— 缺失__，工具链（如stylelint-selector-bem-pattern）会报错，人眼也难判断它是否真属card -
card__image-wrapper-inner❌ —— 元素名嵌套过深，违反“元素必须直属于块”的约定，三年后没人敢改 -
button--primary✅，但class="button--primary"单独使用是无效的——必须搭配基础类class="button button--primary"
为什么Sass嵌套写法容易踩坑
Sass的&__content看着省事，但一不留神就写出非BEM结构。编译器不校验语义，只管拼字符串。
-
.button { &__icon { ... } }→.button__icon✅，没问题 -
.button { .icon { ... } }→.button .icon❌，权重升为0-2-0，且DOM一动就失效 -
@extend %base-button跨块复用时，.input--small和.button--small共用同一套CSS规则，表面类名合规，实际逻辑耦合 - 修饰符不能嵌套：写
.button__icon--hidden是错的，应为.button--icon-hidden或拆出新块icon--hidden
HTML中class属性怎么写才算真正落地BEM
一个元素上堆多个BEM类，或者混入工具类，等于亲手撕开刚建好的隔离墙。
- 每个元素只允许一个BEM主干类：
class="card__header"✅，class="card__header u-text-center"❌（u-text-center是utility类，需团队明确分层） - 禁止跨块组合：
class="button product-card__cta"是反模式——按钮逻辑必须收敛在button块内，product-card__cta应继承或透传 - 修饰符必须与基础类共存：
class="modal modal--scrollable"✅，class="modal--scrollable"❌（无基础类时，样式无法生效） - 块名本身可含短横（如
user-profile），但后续__和--必须紧贴，不能有空格或额外短横
构建工具链里哪些配置会悄悄破坏BEM
BEM的0-1-0权重和作用域稳定性，全靠工具链守住最后一道防线。一个配置错误，整套命名就形同虚设。
立即学习“前端免费学习笔记（深入）”；
-
css-loader的localIdentName若设为[hash:base64]却没保留__和--，menu__item可能被转成menuitem_abc123，直接失效 - 未启用
stylelint-selector-bem-pattern规则，.card-image这种漏掉__的写法不会被拦截 - CSS文件引入顺序错乱：
.button--disabled规则在.button之前加载，层叠顺序颠倒，modifier永远不生效 - Vue/React中用
clsx动态拼接类时，若漏传基础类（如只传button--primary），运行时就失去样式锚点
