阴影修饰符必须语义化，如.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 体系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
