Upload组件的Block名必须为upload，因其须与文件名Upload.vue严格1:1对应，确保stylelint、VS Code跳转等工具链正常工作；file-upload和uploader均因命名不一致而破坏映射与识别。
Upload 组件的 BEM 命名必须把 upload 作为 Block 名，所有类名都从它出发；不能写成 file-upload 或 uploader，否则破坏组件边界与工具链识别。
为什么 upload 是唯一合法的 Block 名
Block 名必须和组件文件名严格 1:1 对应。Vue 项目中若组件叫 Upload.vue，Block 就只能是 upload —— 这不是语义偏好，而是 stylelint-selector-bem-pattern、VS Code 类名跳转、postcss-bem 插件生效的前提。
-
file-upload❌：违反文件名映射，IDE 搜不到file-upload__input对应的样式文件 -
uploader❌：拼写不一致，Upload.vue→uploader会让新成员误以为是另一个组件 -
upload✅：小写、短横线、无缩写，且能直接对应Upload.vue和_upload.scss
upload__input、upload__list、upload__item 的层级关系怎么定
所有 __ 元素必须是 upload 的直属 DOM 子节点，不能跨层嵌套。常见错误是把列表项再拆出子元素，比如 upload__list__item —— 这直接违反 BEM 规则，也导致样式无法复用。
-
upload__input✅：隐藏的原生<input type="file">，直属于<div class="upload"> -
upload__list✅：上传队列容器，也是upload的直系子元素 -
upload__item✅：每个待上传/已上传文件的卡片，是upload__list的子节点，但它的类名仍为upload__item（BEM 不递归，只平级声明） -
upload__list__item❌：三段式命名，工具链无法识别，DevTools 中搜不到对应样式定义
upload--dragover、upload__item--error 这类修饰符怎么用才不翻车
Modifier 只能挂载在 Block 或 Element 上，且必须表达状态或变体，不能承担布局职责。双中划线 -- 是硬性锚点，漏写或错位会导致整个校验链失效。
立即学习“前端免费学习笔记（深入）”；
-
upload--dragover✅：整个上传区域处于拖拽悬停态，作用于 Block -
upload__item--error✅：单个上传项失败，作用于 Element -
upload__item--large--focused❌：双修饰符连写，应拆成两个 class：upload__item--large upload__item--focused -
upload--full-width❌：用 Modifier 控制 width，违背“修饰符不负责容器逻辑”原则；应抽成独立布局工具类或用 CSS-in-JS 动态控制 -
upload__item__progress❌：误把进度条当子元素，其实progress是可复用组件，应独立为progressBlock，upload 内部直接用progress类名
遇到 icon、progress、button 这些复用型子组件该怎么处理
只要一个节点能在多个上下文中独立存在、配置或测试，它就该是 Block，而不是谁的 __ 元素。强行塞进 upload__icon 会绑架结构、阻碍复用，也破坏组件封装性。
-
icon✅：独立 Block，Upload 组件内直接写<i class="icon icon--upload"></i> -
progress✅：同理，用<div class="progress progress--small"></div>，不加 upload 前缀 -
btn✅：上传按钮就是普通btn，加btn--primary即可；不需要upload__btn -
upload__icon❌：图标出现在导航、卡片、上传区，说明它具备跨组件复用能力，不该依附 upload
真正容易被忽略的是：BEM 的约束力不在命名格式本身，而在 HTML 结构是否同步收敛——如果 upload__item 里还嵌了 user-card，那 user-card 必须是完整 Block 名，不能简写成 upload__user-card。
