应使用语义化Modifier定义阴影深度，如.card--elevated、.card--lifted、.card--flush，而非数字编号；Element级需带完整Block-Element前缀，如.card__header--shadowed；多Modifier并列使用，响应式通过媒体查询调整CSS变量值实现。
如何用 Modifier 定义阴影深度，而不是写 .card--shadow-2
直接写 .card--shadow-2 是反模式——数字 2 不表达意图，只记录当前实现快照。换设计系统后，2 可能对应新规范的 depth-medium，但类名不会自动更新。Modifier 必须是语义化、可预测的状态标识。
正确做法是定义有限、业务可读的阴影层级：
-
.card--elevated：用于浮层操作（如弹窗、下拉菜单） -
.card--lifted：中等高度，常用于卡片主体（比背景略高） -
.card--flush：零阴影，用于嵌入式区域（如表单内嵌卡片）
这些名称不绑定具体 box-shadow 值，CSS 中可映射到 CSS 自定义属性：.card--elevated { --shadow: 0 8px 24px rgba(0,0,0,0.16); }，基础 .card 里统一用 box-shadow: var(--shadow);。
Element 级阴影 Modifier 怎么命名才合法
如果阴影只作用于某个 Element（比如 .card__header 单独加投影），Modifier 必须带完整 Block + Element 前缀，不能省略或错位：
✅ 合法：.card__header--shadowed、.card__footer--subtle
❌ 非法：.header--shadowed（脱离 Block 上下文）、.card--header-shadow（混淆了 Block Modifier 和 Element 语义）
关键判断：这个阴影是否只在该 Element 出现？是否复用场景明确？若 .card__header--shadowed 在用户资料页和订单页都出现且表现一致，它就是合理 Element Modifier；若只是某处临时加的视觉点缀，应改用内联样式或局部 class，不进 BEM 体系。
立即学习“前端免费学习笔记（深入）”；
多个阴影 Modifier 能否组合使用
可以，但必须并列，不可链式：
✅ 正确：card__header card__header--shadowed card__header--inverted
❌ 错误：card__header--shadowed--inverted（BEM 不支持 Modifier 嵌套）
组合逻辑由 CSS 规则本身控制，例如：.card__header--shadowed { --shadow: ...; } 和 .card__header--inverted { color: #fff; background: #000; }，两者互不依赖，叠加生效。注意避免冲突：若两个 Modifier 都设 box-shadow，后者会覆盖前者，需提前约定优先级或拆成单值 Modifier（如 --shadow-depth + --shadow-color）。
响应式阴影怎么用 Modifier 表达
不要用媒体查询生成新类名（如 .card--shadow-mobile），那会膨胀类名数量、破坏语义连贯性。应在基础 Modifier 上通过媒体查询调整变量值：
.card--elevated { --shadow: 0 4px 12px rgba(0,0,0,0.1); }<br>
@media (min-width: 768px) { .card--elevated { --shadow: 0 8px 24px rgba(0,0,0,0.16); } }
这样既保持 HTML 类名稳定，又让设计师/前端对“elevated”含义有共识——它代表“需要强调层级”，而非“在桌面端显示更重阴影”。真正容易被忽略的是：Modifier 名称一旦定下，就应长期稳定；变的永远是 CSS 实现，不是类名本身。
