必须是 upload__preview，因为它是上传组件的直属子元素，强依赖上传状态和逻辑，bem规范要求双下划线明确层级归属，避免全局冲突、语义污染及样式失控。

图片上传组件的预览区必须命名为 upload__preview，不能叫 preview、upload-preview 或 upload__preview-area。

为什么必须是 upload__preview 而不是其他形式

预览区是上传组件（upload）的直属子元素，不是独立功能块，也不跨场景复用——它依赖上传状态存在（没文件时通常隐藏），且样式和交互（如点击放大、删除）都与上传逻辑强耦合。常见错误包括：

• preview：脱离 Block 上下文，全局冲突风险高，无法区分是头像预览还是附件预览
• upload-preview：缺双下划线，BEM 解析为普通类，丢失层级归属，CSS 无法通过 .upload__preview 统一控制过渡或响应式
• upload__preview-area：冗余后缀，“area”不增加语义，反而让 Modifier 难以组合（比如 upload__preview--grid 就比 upload__preview-area--grid 更简洁可读）

upload__preview 下的内容容器怎么命名

预览区内部若需包裹缩略图、加载骨架、错误提示等，统一用 upload__preview-content 作为直接子容器。关键点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 不用 upload__preview-body：body 是 HTML 元素名，语义污染，且易与表单 form__body 混淆
• 不用 upload__preview__inner：BEM 禁止三层命名，__inner 不表达结构意图，只是视觉包裹
• 支持 Modifier 组合：upload__preview-content--grid 控制网格布局，upload__preview-content--empty 表示无文件占位态，但必须与 upload__preview 同时存在，否则基础样式缺失

预览项（单张图）的命名与状态控制

每张预览图本身是 upload__preview-item，所有状态通过 Modifier 绑定到它身上，例如：

• upload__preview-item--loading：显示骨架，配合 opacity: 0.4 和 pointer-events: none
• upload__preview-item--error：叠加错误图标，不改变尺寸或定位逻辑
• upload__preview-item--removable：仅控制是否显示删除按钮，不控制按钮样式本身（那是 upload__remove-btn 的职责）
• 禁止写 upload__preview-item-1 这类序号类：JS 应统一操作 --active 或 --current，而非硬编码索引

最常被忽略的一点：预览区的宽高、溢出、过渡动画必须定义在 upload__preview 基础类里，Modifier 只负责切换 visibility、opacity 或 transform 值——否则删除最后一张图时，预览区会直接坍缩闪退，而不是平滑收起。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！