音视频播放器必须按功能拆分为独立 Block，如 video-player__volume-toggle、video-player__volume-slider、video-player__progress、video-player__fullscreen-btn；修饰符需由 JS 精确控制状态镜像，第三方播放器须严格遵循其 BEM 前缀，背景视频与播放器控件必须分离命名。
音视频播放器必须按功能拆成独立 Block，不能共用同一前缀
音量、进度、全屏这些控件表面都是“滑块”或“按钮”，但交互逻辑、DOM 结构、状态管理完全不同。强行塞进一个 video-player 块里再分 __volume、__progress，会导致 JS 控制混乱——比如静音状态该加在哪个元素上？实际应拆成三个独立 Block：video-player__volume-toggle、video-player__volume-slider、video-player__progress、video-player__fullscreen-btn。每个 Block 自己管自己的 DOM 和类名，互不干扰。
常见错误现象：video-player__volume--muted 加在 slider 上，结果 toggle 按钮图标没变；或者把 video-player__progress 写成 video-player__control__progress，破坏 BEM 单层嵌套规则。
- 音量 toggle 是纯状态切换（静音/恢复），只响应 click，挂
data-plyr="mute"或自定义事件 - 音量 slider 是值调节器，必须是
<input type="range">，且 class 必须为video-player__volume-slider - 进度条容器
video-player__progress不是控件，不能带data-plyr，它只负责包裹video-player__progress__buffer和video-player__progress__played
修饰符必须绑定真实 DOM 状态，不能靠 CSS 类硬切
BEM 的 --modifier 不是视觉开关，而是对 JS 状态的镜像。比如全屏按钮显示“退出全屏”图标，不能靠 video-player__fullscreen-btn--active 这个类控制，而要由 JS 监听 document.fullscreenElement，动态写入 data-fullscreen="true" 到根容器，再用属性选择器驱动样式：
.video-player[data-fullscreen="true"] .video-player__fullscreen-btn::before {
content: "✕";
}
常见错误现象：手写 video-player__fullscreen-btn--active 并在 HTML 里静态加上，结果点击后图标不变，因为 JS 没同步这个类；或者用 .video-player--fullscreen .video-player__fullscreen-btn 这种后代选择器，一旦 DOM 结构微调就失效。
立即学习“前端免费学习笔记（深入）”；
- 所有状态类必须由 JS 精确控制，不能靠用户手动加 class
- 禁止用
is-、js-这类非 BEM 命名作状态钩子，统一用--开头的 modifier - 多个状态可并列：
video-player__volume-toggle video-player__volume-toggle--muted video-player__volume-toggle--disabled
第三方播放器（如 Plyr）必须严格遵循其 BEM 前缀，不能自定义覆盖
Plyr 的 DOM 是 JS 动态注入的，所有控制元素都依赖固定 class 名定位。你写 .my-progress 并试图覆盖 .plyr__progress 样式，CSS 规则根本不会生效——因为真实 DOM 里根本没有 .my-progress 这个元素。
常见错误现象：给按钮加 class="play"，发现点击无反应；或写 .video-player__progress 覆盖进度条，但实际生效的是 .plyr__progress；又或者把 .plyr__control 当成通用按钮类乱用，导致音量滑块和播放按钮行为错乱。
- 必须用
.plyr__control作为所有可交互控件的容器级 class，靠data-plyr属性区分功能：data-plyr="play"、data-plyr="volume"、data-plyr="fullscreen" -
.plyr__progress是独立容器，不是.plyr__control的子类，混用会导致 JS 行为异常 - 自定义扩展控件必须挂载到
.plyr__controls内部，且 class 名仍需保持plyr__*前缀
背景视频与播放器控件必须分离命名，禁止复用同一 Block
全屏背景视频（如首页 hero 区域）和带 controls 的播放器是两类完全不同的组件。前者不需要进度条、音量、暂停按钮；后者离不开这些交互。把 video-player 块强行复用作背景视频，会引入冗余 CSS、污染 JS 逻辑、破坏 BEM 层级。
正确做法是：背景视频用语义化 Block 名，如 hero-video，只含 hero-video__media 和可选的 hero-video__poster；播放器用 video-player，完整包含所有控件 Block。两者样式、JS、DOM 完全隔离。
- 禁止出现
video-player__poster或hero-video__progress这类跨职责命名 - 布局控制全部由父容器承担：
hero-video设position: fixed，hero-video__media只管object-fit: cover - z-index 冲突必须用
body:is([data-fullscreen="true"]) .hero-video这类属性选择器修复，而不是堆!important
video-player__volume-slider 里写 display: none 来隐藏整个音量区域，而不是用 video-player__volume-slider--hidden，说明 BEM 已经在协作中失守了。 
