bem中双下划线__表示块与元素的强制从属关系，双连字符--表示状态或变体；__不可简写为_或-，--不可简写为-，二者语义严格且不可互换、不可省略。

双下划线 __ 表示“从属关系”，双连字符 -- 表示“状态或变体”——这是BEM里两个不可互换、也不可省略的语法锚点。

为什么__不能写成_或-？

因为__是BEM中唯一合法的块与元素之间的连接符，语义上强调“这个元素必须属于且仅属于该块”。一旦写成menu_item或menu-item，就失去了BEM的层级约束力，CSS选择器可能意外匹配到其他上下文里的同名节点。

• header__logo ✅ 合法：logo是header的直属子元素
• header_logo ❌ 语义断裂：失去块/元素边界，易与命名空间冲突
• header-logo ❌ 被识别为多词块名（如header-logo本身是一个块），而非元素
• 多个单词的元素名必须用短横线连接：form__submit-button ✅，form__submitButton ❌

为什么--不能只写一个-？

单个-在BEM中只用于拼接多词名称（如user-profile），而--专用于修饰符，目的是避免和块/元素名中的连字符混淆。比如button--primary能明确区分于button-primary（后者会被当作独立块名）。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• button--disabled ✅ 表示button块的禁用状态
• button-disabled ❌ 可能被误读为另一个块，且无法与button建立语义关联
• 修饰符必须紧贴它所修饰的目标：card__title--highlight ✅，card--highlight__title ❌（修饰符不能跨级作用）
• 修饰符不继承、不传播：menu__item--active 只影响该li自身样式，不影响其子元素

常见错误：把__和--混用或嵌套

BEM不允许修饰符“穿透”层级，也不允许元素再包含子元素——这意味着你永远不该看到block__element__subpart或block__element--modifier__icon这类写法。

• modal__header--large ✅ 允许：修饰符直接作用于元素
• modal__header__title ❌ 禁止：BEM不支持元素嵌套元素，应改为modal__header-title（作为新元素）或另起块
• button--primary__icon ❌ 逻辑错乱：修饰符不能作为父级去“拥有”元素
• 块名本身不能含__或--：user__profile ❌，应为user-profile（块名用短横线）

真正容易被忽略的，不是符号怎么写，而是每个__和--背后绑定的语义契约：前者锁死归属，后者限定作用域。写错一个符号，往往意味着组件结构在设计层面已经松动了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！