BEM规范只允许Block__Element或Block--Modifier两种类名形式，card__header__title因含三层下划线违反规则；它导致复用困难、搜索失效、维护脆弱，应改用独立Block加Modifier或data属性标记上下文。
card__header__title 为什么不是合法类名
它根本不是 BEM 规范允许的类名形式。card__header__title 属于 Block__Element__Element 三层结构，而 BEM 明确只接受 Block__Element 或 Block--Modifier 两种模式。规范不校验 HTML 结构，但强制要求每个 __ 后面只能跟一个语义明确的 Element 名——这个 Element 必须直属于 Block，不能是某个 Element 的“孩子”。
浏览器不报错，但协作和维护立刻出问题
写 card__header__title 不会触发 CSS 解析错误，但它会让以下事情变得脆弱：
- 无法单独抽离或测试该元素：它没有独立语义，脱离
card__headerDOM 节点后，样式、JS 初始化、可访问性上下文全部断裂 - SCSS 嵌套容易误产非法名：
&__header { &__title { ... } }编译后就是card__header__title，开发者以为在“封装”，实际在制造技术债 - 搜索失效：你在项目里搜
title，找不到它；搜card__header，又会混入大量无关内容；团队新人根本不敢动 - 样式复用归零：想把同样视觉效果的标题用在弹窗或侧边栏？必须重写类名、重写样式、重写 JS 绑定逻辑
DOM 可以三层嵌套，CSS 类名必须扁平
BEM 不限制 HTML 结构深度，只约束类名的语义层级。真实 DOM 完全可以是：
<div class="card">
<div class="card__header">
<h2 class="heading heading--in-card-header"></h2>
</div>
</div>
关键在于：heading 是独立 Block，heading--in-card-header 是它的 Modifier，用于表达上下文差异；而布局微调（如间距、对齐）靠父级类名控制：.card__header .heading { margin-bottom: 8px; } —— 这种嵌套仅限一层，且只用于定位，不定义核心样式。
立即学习“前端免费学习笔记（深入）”；
真遇到强耦合孙子节点，优先用状态或数据属性
极少数场景下，比如折叠面板里的二级标题、弹窗 footer 中的按钮组，它们几乎从不在别处复用，且样式高度依赖容器。这时不要硬造新 Block，更不要用 __ 嵌套，而是：
- 加 State 类：
class="heading is-subheading"，再写.is-subheading { font-size: 0.9em; } - 用 data 属性标记上下文：
<div data-context="modal-footer"><button class="btn">，对应 CSS：<code>[data-context="modal-footer"] .btn { padding: 4px 8px; } - 避免
card__body__button-group这类命名——它既搜不到，也切不出，还让button-group失去语义独立性
真正难处理的从来不是怎么命名，而是没在设计初期区分“可复用单元”和“上下文装饰”。一旦混淆，所有后续命名都会变成补丁。
