BEM禁止card__header__title等三层命名，因其违反“元素必须直属于块”的核心规则；应将title升为独立Block（如heading）或用Modifier（heading--in-card-header）表达上下文。
深层嵌套的子元素不该用多层 __ 命名，BEM 不允许 block__element__subelement 这类写法——它不是语法错误，而是语义失效的开始。
为什么 card__header__title 是非法的
BEM 只承认两种结构：block__element 和 block--modifier。出现第三个 __，等于把中间项（如 header）误当作 Block，但 card__header 本身只是 Element，没有独立语义边界和复用能力。
-
card__header__title一旦被写死，就无法脱离card__header的 DOM 结构单独使用 - 若后续把
card__header改成card__section，所有card__header__title样式静默失效 - SCSS 中写
&__header { &__title { } }会编译出非法类名，且容易误给card__header加 padding，破坏 Element 的纯展示职责
深层 DOM 结构下该挂什么类名
HTML 可以嵌套四层、五层，但类名归属必须按“是否为独立 UI 单元”来判断，而不是按 DOM 深度机械拼接。
- 如果一个视觉单元在别处复用（比如列表、下拉菜单、表格），它就该抽成独立 Block：
list、dropdown、table - 如果只是卡片内一段固定文案，且绝不出现在别处，优先用 Modifier 或 State 类：
card__body-text--subtle或class="text is-in-card-body" - 禁止用
card__body__list__item__text这种长名——它暴露的是 DOM 路径，不是组件意图
多级导航菜单怎么命名才不崩
导航里的下拉菜单不是 nav__item__dropdown，而是一个完整、可独立实例化的 Block。
立即学习“前端免费学习笔记（深入）”；
-
nav只管布局与语义：提供nav__list、nav__item、nav__link - 所有下拉交互逻辑由
dropdownBlock 承担：dropdown__toggle、dropdown__menu、dropdown__item - 二级菜单不是“一级菜单的子元素”，而是另一个
dropdown实例，嵌在nav__item内部即可 - 避免跨 Block 命名：
nav__dropdown、dropdown__menu__submenu都违反职责分离
真正难的不是记住双下划线怎么写，而是每次加一层 DOM 时，停下来问一句：这个节点有没有自己的功能边界？能不能被抽出来，在用户列表、弹窗、侧边栏里复用？如果答案是肯定的，它就不该挂在父 Block 下，而该拥有自己的 block__element 结构。
