父级修饰符不能也不该直接影响子元素样式，因其违背BEM样式隔离原则；它仅应改变自身外观或行为，子元素响应须通过显式类名（如.card__title--hovered）正交组合实现，确保可复用性与语义清晰。
父级修饰符能不能直接影响子元素样式
不能，也不该。BEM 的核心原则是样式隔离，.block--modifier 只应改变 .block 自身的外观或行为，不应对 .block__element 做隐式样式接管。常见错误是写 .card--hovered .card__title，这会让 .card__title 的样式依赖父级状态，一旦 .card__title 被抽离复用（比如单独渲染在弹窗里），样式就断了。
- 父级修饰符只负责“容器语义变更”，如
.nav--collapsed控制整体收起，但子项显隐必须由 JS 显式切换.nav__item--hidden类 - 若真需批量响应（如整个列表禁用），优先用属性选择器：
.list[aria-disabled="true"] .list__item，而非.list--disabled .list__item - 所有子元素样式必须能独立存在：删掉父级类后，
.list__item仍应保持基础可用态
子元素如何正确响应父级状态变化
靠显式类名 + 正交组合，不是靠 CSS 层级穿透。例如卡片悬停时标题加粗、正文变色，不是靠 .card--hovered .card__title，而是让 JS 同时添加 .card__title--hovered 和 .card__body--hovered。
- 每个子元素是否响应，由调用方决定 ——
.card--hovered不自动触发任何子类，它只是个信号 - 子元素修饰符命名必须带完整路径：
.card__title--hovered，不能简写成.card-title--hovered（破坏 BEM 归属） - 避免在
.card--hovered规则里写&__title嵌套 —— Sass 中&__title会生成.card--hovered__title，这是非法类名
什么时候必须用父级修饰符驱动子项
仅当该状态属于容器级不可拆分行为，且子项无独立状态语义。典型场景是布局切换（如网格/列表视图）、无障碍控制（aria-live 区域）、或 DOM 结构强制约束（如下拉菜单展开时遮罩层激活）。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 用属性选择器比 class 更可靠：
.dropdown[aria-expanded="true"] .dropdown__menu比.dropdown--expanded .dropdown__menu更易与原生属性对齐 - 若子项需响应，必须在 HTML 中显式声明双重类：
<div class="card__header card__header--expanded">，而不是靠父级“传染” <li>禁止在父级修饰符规则中写伪类：<code>.card--hovered:hover .card__footer—— 这等于要求用户鼠标既悬停卡片又悬停页脚，逻辑错乱 - 不要指望
.card:has(.card__button--loading)在旧浏览器生效；改用 JS 添加.card--has-loading-button - 第三方组件（如
react-select）内部结构不可控，.select--focused .select__input很可能失效 —— 正确做法是封装外层容器，用.my-select--focused配合自定义属性控制 -
display: contents会破坏父子 DOM 关系，导致所有基于层级的选择器失效 —— 此时只能靠子元素自身修饰符，如.grid__cell--selected
容易被忽略的兼容性陷阱
IE11 不支持 :has()，而现代方案常依赖它做“父级状态感知”。但 BEM 本身不解决这个问题 —— 它要求你放弃“自动推导”，改用明确的类名组合。
立即学习“前端免费学习笔记（深入）”；
