bem通过块名、__、--三重硬约束将样式归属、从属关系和状态语义钉死在类名里：块名锁作用域，__锁元素归属，--锁状态粒度；禁用嵌套选择器和连缀修饰符，强制单类名与目录模块严格映射，确保协作中可定位、可审查、不可越界。
因为BEM不是靠“名字好看”撑住中大型项目，而是用三重硬约束把样式归属、从属关系和状态语义直接钉死在类名里——块名锁作用域，__锁元素归属，--锁状态粒度，缺一不可。
为什么.btn在百人协作中必然失控，而.checkout-form__submit--loading不会
常见错误现象：两人同时改.btn，一个加padding，一个调font-size，上线后订单页按钮炸开，但没人能立刻定位是哪个模块的.btn导致的。
- 根本原因：
.btn无上下文、无所有权、无状态标识，浏览器查得到，人脑想不出它属于谁 - BEM强制类名携带“户籍信息”：
checkout-form__submit一眼可知只属于 checkout-form 模块，--loading明确是状态变体，不是视觉描述 - 搜索替换安全：搜
checkout-form__submit只会命中该模块，不会误伤user-modal__submit或search-bar__submit
为什么禁用.card .title这类嵌套选择器是BEM落地的生死线
常见错误现象：DOM结构调整后，.card .title突然不生效；微前端子应用注入同名.title，样式互相覆盖；SSR直出HTML时，后端模板工程师看不懂这个选择器到底绑定在哪段业务逻辑上。
- BEM只允许单类名选择器：
.card__title浏览器一次哈希查找即命中，不依赖DOM路径 - 禁用空格=禁用结构耦合：哪怕
.card内部div被换成section，.card__title照样生效 - 构建阶段可自动化拦截：
stylelint-selector-bem-pattern能直接报错.card .title、.btn-primary等非BEM写法
为什么button--primary--large--disabled是BEM失效的典型信号
常见错误现象：团队开始写button--primary-large-disabled，接着冒出button--primary-large、button--large-disabled，最后发现无法单独启用--large，主题系统也无法按状态粒度接管。
- 修饰符必须单一职责：
button--primary、button--large、button--disabled应独立存在、自由组合 - 连缀修饰符破坏可预测性：它把多个状态压缩成一个不可拆解的字符串，违背BEM“状态语义化”的初衷
- CI必须拦截：
stylelint-selector-bem-pattern配置需拒绝双连字符连用，否则后期重构成本指数级上升
为什么BEM目录结构比命名规则更难守住
真正卡住团队的不是写不出product-card__price--highlighted，而是有人在/components/button/下写了card__button，或在modal.css里塞了.modal__tooltip。
- 目录即模块契约：
/components/product-card/下只能有product-card.css，且所有类名必须以product-card开头 - 文件名与block名必须严格一致：
card.css→.card是错位，product-card.css→.product-card才是正确映射 - 子组件必须独立成目录：tooltip不是
modal的附属，它是可复用的独立block，该建/components/tooltip/
最常被忽略的是边界感：BEM只管有明确业务语义的组件，u-text-center这类工具类、theme-dark这类全局变量、reset-list这类归一化规则，硬塞进BEM结构只会让命名膨胀且语义失焦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
