如何在CSS BEM中处理具有阴影和复杂边框效果的修饰符？

阴影修饰符必须语义化，如.card–elevated、.card–lifted、.card–flush，不可用数字编号；Element级修饰符需带完整Block-Element前缀，如.card__header–shadowed，并通过CSS变量映射具体阴影值。

阴影修饰符必须语义化，不能用数字编号

直接写 .card--shadow-2 是错的——数字不表达设计意图，只记录当前实现快照。换一套设计系统后，“2”可能对应新规范里的 depth-medium，但类名不会自动更新。

正确做法是定义有限、业务可读的阴影层级：

• .card--elevated：用于浮层操作（弹窗、下拉菜单）
• .card--lifted：中等高度，常用于卡片主体
• .card--flush：零阴影，用于嵌入式区域（如表单内嵌卡片）

这些 Modifier 不绑定具体 box-shadow 值，而映射到 CSS 变量：.card--elevated { --shadow: 0 8px 24px rgba(0,0,0,0.16); }，基础 .card 统一用 box-shadow: var(--shadow)。

边框效果优先用 box-shadow 而非 border

纯 border 只能定义一层线，想实现内外双色/不同宽度的边框，硬套会卡在「无法独立控制内外间隙」上。box-shadow 更可控：设为 0 0 0 Npx color 就等效于向外撑开一层纯色环，还能叠多层。

立即学习“前端免费学习笔记（深入）”；

关键实操点：

• 内边框用 inset：box-shadow: inset 0 0 0 2px #333
• 外边框用普通投影：box-shadow: 0 0 0 4px #ff6b6b, 0 0 0 8px #4ecdc4
• 顺序很重要：靠前的 box-shadow 在视觉上更靠近元素；最外层要写在最后，才能“盖住”中间层
• 有 border-radius 时，阴影扩散值必须 ≤ 圆角值，否则边缘露直角

阴影 + 边框叠加时，Modifier 必须正交且显式覆盖

比如一个按钮同时需要 .button--primary（定义图标和主色）和 .button--loading（定义旋转动效层），它们不是互斥状态，而是可叠加的业务语义。

常见错误是让两个 Modifier 各自写一套完整的 background-image 或 box-shadow，结果因逗号错位、路径 404 或属性未配对，整条声明被浏览器丢弃，回退成透明背景。

安全做法：

• 每个 Modifier 只改自己负责的维度：.button--primary 控制主图+渐变，.button--loading 只加动效 SVG 层，并配好 background-size
• 叠加态必须显式写规则：.button--primary.button--loading { background-blend-mode: overlay; }
• 避免在不同 Modifier 中重复定义同一属性（如都设 background-color），否则后声明的会覆盖前一个

Element 级阴影或边框 Modifier 命名必须带完整 Block-Element 前缀

如果阴影只作用于某个 Element（比如 .card__header 单独加投影），Modifier 不能省略 Block 上下文，也不能错位。

✅ 合法：.card__header--shadowed、.card__footer--subtle
❌ 非法：.header--shadowed（脱离 Block）、.card--header-shadow（混淆 Block 和 Element 语义）

判断依据很实在：这个样式是否只在该 Element 出现？是否在多个页面复用且表现一致？若只是某处临时加的视觉点缀，应改用内联样式或局部 class，不进 BEM 体系。