装饰性背景图在BEM中必须绑定到具体语义Block（如section-hero），禁止孤立类名；多层叠加时background-image、size、position三组属性须严格一一对应；伪元素装饰需保留语义类名；路径404会导致整条声明静默失效。
装饰性背景图在 BEM 中不是“加个 class 就完事”，而是必须明确它属于哪个语义块、是否可复用、是否需要状态控制——否则很快会变成一堆孤立的 .bg-pattern、.deco-1，改一次设计就得全局搜替换。
background-image 必须绑定到具体 Block，不能脱离上下文存在
常见错误是写一个通用类 .deco-bg，然后到处 class="deco-bg"。这违反 BEM 的作用域原则：装饰图不是独立组件，而是某个业务模块的视觉表达部分。
- 正确做法：按语义命名 Block，比如
section-hero、card-feature、footer-ornament - 装饰图只出现在这些 Block 的 CSS 声明里：
.section-hero { background-image: url('hero-deco.svg'); } - 禁止出现孤立修饰符如
--deco或--pattern，它们没说明“谁在用”“为什么用”
多层装饰图叠加时，background-image 顺序和配对必须严格一致
比如 .section-hero 要叠加纹理 + 渐变 + 图标，声明必须是：
.section-hero {
background-image: url('icon.svg'), url('texture.png'), linear-gradient(135deg, #f0f0f0, #e0e0e0);
background-size: 48px 48px, auto, 100% 100%;
background-position: top right, center, center;
background-repeat: no-repeat, repeat, no-repeat;
}
三个值的数量、顺序、语义必须一一对应。漏掉一个 background-size，整条 background-image 就被浏览器丢弃，回退为透明。
- 每个修饰符（如
.section-hero--dark）若修改背景，必须重写全部三组属性，不能只覆盖background-image - 不要在不同修饰符中混用相同图层位置（例如两个修饰符都设
background-position: top left），否则后加载的会覆盖前一个 - DevTools 的 Computed 面板里如果
background-image只显示一行值，说明某一层语法出错或路径 404
装饰图不参与响应式断点切换，但需配合 media query 防失真
BEM 修饰符（如 --mobile-deco）不能替代媒体查询做分辨率适配——类名不会随 DPR 或 viewport 自动增删，也不会触发新资源请求。
- 真正起效的是
@media (-webkit-min-device-pixel-ratio: 2)覆盖background-image，并显式设background-size: contain或cover - 高清图若没设
background-size，可能被拉伸模糊；普通图设了反而会裁剪 - 装饰图的语义修饰符只用于区分用途，比如
.section-hero--promo对应 promo-deco.svg，--feature对应 feature-deco.svg，而非--retina
伪元素实现的装饰图仍要遵守 BEM 元素命名
有些装饰图用 ::before 实现（比如角标、分隔线），DOM 里没有真实节点，但仍需语义锚点。
- 保留
section-hero__deco类名在容器上，哪怕只是个空 div 或伪元素载体 - 样式写成
.section-hero__deco::before { content: ''; background-image: url('corner.svg'); } - 避免混合：同一个 Block 内不要既有真实子元素
，又用伪元素画同一类装饰，维护成本翻倍 - 伪元素装饰图无法被 JS 单独控制显隐或替换，如需交互能力（比如 hover 显隐），必须用真实 DOM 元素
最常被忽略的一点：装饰图路径 404 不报错，但会导致整条 background-image 失效——它不像 url() 路径是否真实存在且大小写一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
