应该加--drag-active，但必须绑定到drop-area块元素上，作为其临时状态修饰符，不可泛化为全局；需在dragover中调用preventDefault()以确保事件准确触发，并用:not(.drop-area--disabled)避免与禁用态冲突。
拖拽区域激活态的 BEM 命名是否该加 --drag-active？
应该加，但必须绑定到具体块元素上，不能泛化为全局修饰符。BEM 的修饰符（modifier）本质是描述“同一个块在不同状态下的视觉/行为差异”，而拖拽激活是 drop-area 这个块自身的临时状态，不是独立组件。
常见错误是写成 drop-area--drag-active 却没约束作用域，导致样式泄漏或与其它 drop-area 实例冲突。正确做法是让修饰符只作用于当前块实例：
-
drop-area是块名，代表整个拖拽上传容器 -
drop-area--drag-active是它的状态修饰符，仅当dragenter触发且未离开时添加到该 DOM 节点 - 不要用
drop-area__item--drag-active这类嵌套修饰符——子元素的状态应由父块控制，而非自行声明“正在被拖拽”
dragover 事件里反复触发 preventDefault() 会影响 BEM 类切换吗？
不影响类名操作本身，但影响激活态是否能持续显示。浏览器默认会取消 dragover 的默认行为（比如显示禁止图标），而如果不调用 preventDefault()，dragenter 和 dragleave 可能无法准确触发，导致 drop-area--drag-active 类加了又立刻被删。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 必须在
dragover回调中同步调用event.preventDefault()，哪怕只是空函数体 - 只在
drop-area元素上监听dragenter/dragleave，别在 document 或 body 上监听——否则会误判跨子元素移动为“离开” - 用
event.relatedTarget+contains()做防抖判断，避免子元素间移动触发假dragleave
CSS 中怎么写 drop-area--drag-active 才不和禁用态冲突？
关键在于修饰符层级和 specificity 控制。如果同时有 drop-area--disabled 和 drop-area--drag-active，后者不能无条件覆盖前者——拖拽进一个禁用区域不该高亮。
推荐写法：
.drop-area {
/* 基础样式 */
}
.drop-area--disabled {
opacity: 0.5;
pointer-events: none;
}
.drop-area--drag-active:not(.drop-area--disabled) {
border: 2px dashed #007bff;
background-color: #f8f9fa;
}这样既保证语义清晰，又避免样式打架。切忌用 !important 强行覆盖，那说明 BEM 结构或状态设计已失衡。
React/Vue 里动态加 drop-area--drag-active 类要注意什么？
框架的响应式更新机制会让类名切换变“慢半拍”。比如 dragleave 触发后立即 setState，但此时鼠标可能还在边界上抖动，导致闪烁。
建议处理方式：
- 加 100ms 防抖：只在
dragleave后延迟移除类，dragenter立即添加 - 用
ref直接操作 DOM 类名（React）或$el（Vue），绕过虚拟 DOM diff 延迟，尤其适合高频拖拽场景 - 服务端渲染（SSR）时确保初始不带
--drag-active—— 这个态永远是客户端交互产生的，服务端不可能预知
拖拽激活态看着简单，实际要同时稳住事件流、DOM 状态、CSS 层叠和框架更新节奏，漏掉任意一环都会出现“明明拖进去了却不高亮”或者“松手后还一直高亮”的问题。
