BEM中__仅表示元素直属块，非DOM嵌套标记；menu__item__icon非法，因__只能出现一次，工具链将失效、语义断裂，正确写法是menu__icon或拆分为独立block。
因为 __ 不是嵌套标记，而是“直属归属声明”——它只表示“这个元素直接属于某个 Block”，不是 DOM 深度计数器。
为什么 menu__item__icon 是非法命名
BEM 解析器、Sass 的 &__icon、PostCSS 插件、IDE 类名跳转，全部依赖 __ 出现在块名之后且仅一次。出现第二次（如 __item__icon）时，工具链会：
- 把 item__icon 当作一个整体元素名，无法识别其内部结构
- &__item__icon 在 Sass 中不匹配任何嵌套规则，编译后类名丢失或错位
- 团队成员看到该类名，无法判断 icon 是属于 menu 还是 item，语义断裂
__ 只能出现在块名之后、且仅一层
合法写法始终是 block__element，哪怕 DOM 结构是三层深：<menu><item><icon></icon></item></menu>
对应类名仍是 menu__icon，不是 menu__item__icon
- 元素必须平级归属 block，不继承父元素的“元素身份”
- 多层 DOM 结构 ≠ 多层 BEM 命名；BEM 要解耦样式与 HTML 层级
- 若
icon在多个 block 中复用（如menu和user-card），它本身就该是独立 block：icon，而非依附命名
深层结构难命名？优先拆新 block，而不是加下划线
遇到 user-card__content__avatar 这类写法，说明已偏离 BEM 本意：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
user-card__content实际不是语义清晰的“元素”，而是一个隐含的子 block - 正确做法是提取为独立 block：
user-content或user-avatar，再通过组合使用 - 拆块后可复用、可单独测试、样式隔离更干净，比拼接类名更可持续
真正容易被忽略的点是：BEM 的扁平化不是为了“少打几个字符”，而是为了让每个 class 名在工具链里可解析、在团队协作中无歧义、在重构时能准确定位作用域。一旦允许 __ 多次出现，这套契约就从根上失效了。
