bem类名几乎不依赖选择器层级，因其强制采用单类名选择器（如.card__title），用命名隔离（block__element--modifier）替代层叠依赖，杜绝后代选择器、标签或id限定，确保样式作用域扁平独立、权重恒为0-1-0。
BEM 不是重新定义 CSS 层叠机制，而是绕开它。
为什么 BEM 类名几乎不依赖选择器层级
CSS 层叠（Cascading）本质依赖选择器权重和源码顺序，而 BEM 的核心策略是：用命名隔离代替层级约束。比如 .card__title 和 .header__title 从不靠 .card .title 这类后代选择器匹配，它们彼此无继承关系，也不共享父级上下文。
- 所有样式都写在单个类上，如
.card__title而非.card .title - 禁止使用标签选择器、ID 选择器、组合选择器（如空格、
>、+）来限定作用域 - 块之间即使嵌套（如
<div class="sidebar"><div class="card">...</div></div>），CSS 里也绝不会写.sidebar .card__title
.block__element--modifier 如何规避层叠冲突
修饰符不是靠覆盖，而是靠显式启用。例如 .button--disabled 必须和 .button 同时存在，它的样式不是“覆盖 .button”，而是补全状态逻辑：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
.button {
cursor: pointer;
}
.button--disabled {
cursor: not-allowed;
opacity: 0.5;
}
- 如果只写
.button--disabled而漏掉.button，按钮会丢失基础样式（如 padding、font-size） - 没有“父级激活才生效”的层叠依赖，
--disabled在任何 DOM 位置都表现一致 - 多个修饰符可共存，如
.button--primary.button--disabled，彼此不干扰
当真需要层叠时，BEM 怎么处理
BEM 允许极少数场景下使用层叠，但仅限于块级修饰符影响其内部元素，且必须严格遵循命名链：
- 正确：
.card--highlighted .card__title—— 因为card--highlighted是块修饰符，且.card__title是其明确子元素 - 错误：
.card--highlighted .title或.card .card__title（后者虽语法合法，但违背 BEM “扁平化作用域”原则） - 更推荐写法：
.card--highlighted .card__title→ 改为.card__title--highlighted，把状态下沉到元素级
真正容易被忽略的点是：BEM 的“不依赖层叠”不是技术限制，而是契约——一旦你开始写 .block .element，就等于放弃 BEM 的模块边界保障，后续维护成本会指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
