BEM中Element命名严禁嵌套，__仅表示元素直接归属Block而非DOM层级；menu__item__icon等写法破坏工具链、语义断裂，正确做法是menu__icon或拆分为独立Block。
初学者误用 BEM 的 Element，核心原因不是记不住语法，而是把 HTML 结构层级直接映射到类名层级——card__header__title 这种写法看似“结构清晰”，实则违反 BEM 本质。
把 __ 当成 DOM 嵌套深度标记
看到三层 DOM 就写三层 __，比如 menu__item__icon，这是最典型的认知偏差。__ 不是“路径分隔符”，它只表示“这个元素**直接属于**某个 Block”。哪怕 DOM 是 <menu><item><icon></icon></item></menu>，合法命名仍是 menu__icon。
-
menu__item__icon会让工具链（Sass&__icon、PostCSS 插件、IDE 跳转）完全失效 - 团队成员无法判断
icon是属于menu还是item，语义断裂 - 一旦
icon需要在user-card中复用，就得硬改类名或复制样式，失去可维护性
混淆 Element 和 Modifier 的语义边界
把状态、位置、外观变化塞进 Element 名里，比如 btn__icon-left 或 card__title-highlighted，本质是让 Element 承担了 Modifier 的职责。
-
btn__icon描述“按钮里的图标”——这是结构归属；btn--icon-left描述“按钮整体采用左图标布局”——这是变体 -
card__title--highlighted违反 BEM 三段式：Modifier 只能修饰 Block 或 Element，不能修饰另一个 Modifier，更不该让 Element 自带状态 - JS 直接操作
card__title--highlighted会导致状态失控——其他card__title也被影响，且无法被card--collapsed正确覆盖
没意识到 Element 必须有独立样式职责
很多初学者给所有容器都加 __，比如 card__content__body__text，但真正该存在的 Element，必须满足：可复用、有明确样式边界、参与 Modifier 响应。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
card__content合法，因为它通常控制 padding/overflow 等布局属性 -
card__content__body很可能非法——如果它只是个包裹<p>的 div，没独立样式、没变体、不参与状态响应，就该删掉类名，用标签选择器或继承处理 - 判断标准很直白：这个东西能不能脱离当前
card单独存在？能，就是 Block（如heading）；不能，才是 Element
用单下划线 _ 替代双下划线 __
_ 在 BEM 中不是替代方案，它是禁用符号。写成 card_header 或 form_input，等于主动关闭所有自动化支持。
- Sass 的
&__header不会匹配card_header，编译后类名丢失 - stylelint-bem 插件静默跳过，问题拖到运行时才暴露
- IDE 类名跳转失败，搜索
header会漏掉card_header，重构时不敢批量替换
真正难的不是记住 __ 和 -- 的拼写，而是在写第一个类名前，停下来问一句：“它有没有资格独立存在？” 答错一次，后面就会多一层耦合、多一个工具链断点、多一次团队理解偏差。
