BEM中元素命名必须用block__element格式，双下划线是唯一合法连接符，表示直属组成部分；禁止单下划线或三层下划线，元素不可嵌套，深层单元需语义重定位，修饰符须严格遵循__element--modifier格式。
子元素命名必须用 block__element，不能写成 block_element 或 block__element__icon
双下划线 __ 是 BEM 中唯一合法的块与元素连接符，它不是“分隔符”，而是语义标记：表示“这个元素是该块的直属组成部分”。写成单下划线 block_element 会被当成普通单词连写，失去 BEM 可读性；写成三层 block__element__icon 则违反“元素不可嵌套”的核心规则——BEM 不承认“元素的子元素”，所有子级视觉单元都应回归到块上下文重新命名。
常见错误现象：header__nav__link 被当作“导航里的链接”，但实际应拆解为：header__nav（导航区域）和 header__link（链接元素），或更合理地提取为独立块 nav。一旦出现三层下划线，基本说明结构设计过深，该重构组件边界。
__ 只能出现在块名之后且仅一层，深层视觉单元不靠嵌套，而靠语义重定位
比如一个用户卡片组件 user-card，里面包含头像、姓名、简介、操作按钮。它们都应直接隶属于 user-card，而不是从 user-card__content 再延伸出 user-card__content__avatar：
-
user-card__avatar✅ 正确：头像是卡片的固有部分 -
user-card__content✅ 可以存在，但它是并列元素，不是容器语义 -
user-card__content__avatar❌ 错误：BEM 不允许元素再含元素 -
user-card__action-btn✅ 合理：动作按钮是卡片功能的一部分，名称用短横线-连接多词，不破坏__结构
性能影响：扁平类名如 user-card__avatar 比后代选择器 .user-card .content .avatar 更快匹配，也避免 HTML 结构微调导致样式断裂。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
图标、文字、开关等常见子元素，命名要聚焦“它是什么”，而非“它在哪”
按钮里的图标不是“左边的图标”，而是“按钮的图标”；表单项里的提示文字不是“下方的文字”，而是“表单项的提示”。位置、方向、顺序属于布局职责，应由 Flex/Grid 或修饰符控制，不该塞进 Element 名：
-
btn__icon✅ 正确：图标是按钮的功能组成部分 -
btn__icon-left❌ 错误：混入位置信息，污染语义 -
btn--left-icon❌ 错误：修饰符不应替代元素角色 -
form-item__help-text✅ 合理：help-text 表明其作用，不是 help-text-bottom
Vue/React 中动态拼接类名时尤其容易出错，比如 ${block}__${el} 若 el 来自 props 且含短横线或空格，会直接产出非法类名。推荐用 bem-cn 或 @bem-react/classname 这类工具做校验和标准化。
修饰符作用于元素时，必须用 __element--modifier，不能省略 __
当某个子元素需要独立状态（如仅图标高亮、仅文字禁用），修饰符必须依附在完整元素名后，保留双下划线结构：
-
btn__text--disabled✅ 允许：明确限定作用目标是文本元素 -
btn__text-disabled❌ 错误：单短横线无法区分修饰符和多词元素名 -
btn--disabled__text❌ 错误：修饰符不能前置，破坏 BEM 解析逻辑 -
btn--large__icon❌ 错误：块级修饰符已覆盖整体，无需再单独修饰子元素，除非有强差异化需求（需团队约定并文档化）
容易被忽略的一点：__element--modifier 是特例，不是常规用法。多数情况下，状态应由块级修饰符统一控制（如 btn--disabled 自动影响内部所有子元素）。只有当视觉/交互逻辑确实要求“只改某一部分”时，才启用元素级修饰符，否则会增加维护成本和认知负担。
