bem通过将组件归属显式写入类名（如.card__title）解决复用性差问题：它不依赖dom层级“猜”关系，避免因结构变动导致样式失效、继承污染和语义漂移，确保样式可移植、易定位、强隔离。
因为 BEM 把「组件归属」直接写进类名，让 .card__title 这种样式天然绑定在 .card 上下文中，不靠 DOM 层级“猜”关系，挪到哪都认得清自己该管谁。
为什么 .card .title 一复制就失效
浏览器匹配选择器是从右往左的：.card .title 实际在找「所有带 title 类、且父级有 card」的元素。一旦新页面结构是 <section class="product-card"><h3 class="title"></h3></section>，.title 就脱离了 .card 包裹，样式立刻断掉。
更隐蔽的问题是继承污染：外层 font-size: 0.875rem 会通过 DOM 树影响 .title，但你根本没在规则里声明它，改起来像捉迷藏。
-
.card__title不依赖父容器是否存在，只要 HTML 里写了这个类，样式就生效 - 它不靠层级“推导”作用域，而是用命名显式声明：“我只属于
.card” - 搜索
card__title就能准确定位全部相关样式，不用 grep 整个 CSS 文件找上下文
.user-card__avatar 比 .avatar 更容易复用
泛化类名如 .avatar 在不同页面语义漂移：在用户页是圆形头像，在评论区可能是方形缩略图，在后台列表又变成带边框的图标——改一个，全崩。
BEM 强制把角色和归属绑死：.user-card__avatar 明确表示“这是用户卡片里的头像”，不是独立资源；如果真需要跨场景复用头像，就该抽成原子块 .avatar 或 .icon--user，而不是让它依附于某个业务容器。
- 元素名不能脱离块名单独存在，
.user-card__avatar合理，.avatar不合理（除非它是真正独立的原子组件） - 修饰符必须挂块根上，
.user-card--selected✅，.user-card__avatar--selected❌（状态属于整个卡片，不是头像局部开关） - 禁止松散组合，如
.user-card .avatar—— 这种写法一挪结构就失效，BEM 要求所有样式都靠单类名命中
为什么 BEM 类名越长，反而越安全
类名长度不是问题，语义模糊才是。比如 .checkout-form__submit-button 看似长，但它比缩写成 .c-f__sb 更可靠：IDE 搜索精准、团队协作无歧义、重构时不会误伤其他模块。
真正要砍的是冗余词，不是块名本身。.search-input 比 .header-search-input 更通用，因为它按功能而非位置命名，能用在弹窗、侧边栏、移动端等任意上下文。
- 嵌套四层 DOM 不影响 BEM，但语义层级不能超两层：block → element，不能再有 element → element
- 出现
.card__content__title就该警惕——要么抽.content成独立块，要么简化为.card__title - 动态生成类名时（如 React 的
className={`${base}--${mod}`}），必须校验mod非空且过滤非法字符，否则产出.btn--这种无效类，样式静默失效
最常被忽略的点是：BEM 不是给 CSS 看的，是给人和工具看的接口契约。一旦类名出现在 HTML 里，它就承担了模块边界声明的责任——写错一个 __ 或 --，下游的搜索、调试、迁移都会卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
