判断DOM节点该为block还是element，关键看其能否脱离当前上下文独立存在、复用、测试；共用组件（如user-avatar）须为独立block，禁用泛标签名或容器名，element不得嵌套命名，block嵌套时须各自声明完整类名。
分组不是BEM的语法要求，而是结构判断的结果——你不需要“主动分组”，而要先识别哪些DOM节点该归为同一个block。
怎么判断一个DOM节点该属于哪个block
关键看它是否能脱离当前上下文独立复用、测试或交付。比如页面里有header__logo，但同一logo也出现在footer和user-card中，那它就不是header的element，而应是独立的logo block。
- ✅ 正确：共用视觉组件（如
user-avatar、status-tag）必须单独成 block，带业务语义 - ❌ 错误：用
div__title、section__content这类泛标签名或容器名当 block —— 没语义、不可复用、易被覆盖 - ⚠️ 常见误判：把 DOM 层级当语义层级。例如
<card><div class="content"><h2></h2></div></card>，若content只是无逻辑 wrapper，则不该存在；真需要它，得证明它有独立状态、样式或复用场景
element命名为什么不能嵌套（如card__content__title）
BEM只允许一层从属关系：block → element，不支持 element → sub-element。出现双下划线嵌套，说明你混淆了结构与语义。
- ✅ 正确写法：
card__title、card__body、card__footer—— 全是card的直接子元素 - ❌ 错误写法：
card__content__title—— 这暗示content是 block，但实际它只是个无意义 div - ? 解法二选一：删掉冗余 wrapper，让
title直接挂card下；或把content提升为 block（仅当它真有封装逻辑，比如可单独配置 padding / background）
多个block嵌套时类名怎么写
嵌套是允许的，但每个 block 必须有自己完整的类名，不能靠父级 class 推导子级语义。例如卡片里放用户头像，不要写 card__user-avatar，而应分别写 card 和 user-avatar。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<div class="card"><div class="user-avatar"></div></div> - ❌ 错误：
<div class="card"><div class="card__user-avatar"></div></div>—— 把user-avatar降级为card的 element，破坏其复用性 - ⚠️ 注意：嵌套 block 之间不共享样式作用域，
user-avatar的样式不应依赖card的 class 存在
真正难的不是拼写 block__element--modifier，而是每次写 class 前都得问一句：“这个节点，离开现在这个父容器还能活吗？” 答案决定它是 block 还是 element —— 这一步错了，后面全白搭。
