bem要求视频控件严格遵循命名规范：进度条须用video-player__progress前缀实现作用域隔离；音量控件应拆分为独立block（video-player__volume-toggle与video-player__volume-slider）；全屏按钮使用语义化状态修饰符（如--active）而非视觉描述；禁止用grid-area混用外部类名；所有修饰符必须由js精确控制以保证状态同步。
video-player__progress 不能直接套用通用进度条类名
很多团队在封装播放器控件时，会把 progress 元素直接复用 .slider 或 .range 这类通用类名，结果导致样式污染——表单里的 range 滑块一改，播放器进度条也跟着变形。BEM 要求进度条必须绑定到播放器上下文：video-player__progress 是块级元素，video-player__progress-bar 和 video-player__progress-thumb 才是它的子元素。不写 video-player__ 前缀，就等于放弃作用域隔离。
音量控件要区分「按钮」和「滑块」两个 Block
音量功能看似一体，但交互逻辑和 DOM 结构完全不同：按钮负责切换静音/恢复，滑块负责调节音量值。强行塞进一个 video-player__volume 块里再拆 __button 和 __slider，会导致状态耦合——比如 video-player__volume--muted 修饰符该加在哪个元素上？实际应拆成两个独立 Block：
-
video-player__volume-toggle（带video-player__volume-toggle--muted修饰符） -
video-player__volume-slider（带video-player__volume-slider--hidden控制显隐）
这样 JS 控制静音只需操作 toggle 类名，滑块显隐由 volume-slider 自己响应，互不干扰。
全屏按钮的 class 名必须体现触发行为而非视觉
常见错误是写成 video-player__fullscreen-btn--icon-only 或 --large，这类修饰符依赖视觉描述，一旦设计改版就得全局搜索替换。正确做法是用语义化状态：video-player__fullscreen-btn--active 表示当前处于全屏态，--disabled 表示不可用（如 iOS Safari 不支持全屏 API）。CSS 中用 :is([data-fullscreen="true"]) .video-player__fullscreen-btn 配合 JS 动态写入 data 属性，比纯 class 切换更可控。
避免在 video-player 内部用 grid-area 直接控制子控件位置
有人为“省事”在 .video-player__controls 容器上设 display: grid，然后给 .video-player__progress 加 grid-area: progress，结果发现进度条宽度被 grid-template-columns 硬性约束，无法响应式缩放。BEM 不反对 Grid，但要求每个区域的子元素仍保持完整块路径：.video-player__controls 是 Block，它的直接子元素必须是 .video-player__controls__progress、.video-player__controls__volume-toggle 等，而不是靠 grid-area 把外部 Block 的类名“借”进来。否则调试时根本分不清某个样式到底属于播放器控件，还是属于某个独立 slider 组件。
video-player__progress--buffering 这个状态，不能靠 CSS 动画模拟，而必须由播放器实例在 timeupdate 或 progress 事件中真实写入——否则缓冲状态永远不同步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
