全屏背景视频的bem命名应按语义而非样式，如hero-video；禁止混用video-player；子元素严格嵌套；布局由父容器控制；状态用data属性驱动；z-index问题需通过isolation修复。
全屏背景视频的 BEM Block 命名必须体现用途而非样式
直接叫 video-bg 或 fullscreen-video 是错的——这类命名隐含尺寸或行为假设，一旦需求变成“半屏轮播视频”就得重命名。正确做法是按语义定块名：hero-video（首页主视觉）、section-video（某内容区块背景）、landing-video（落地页专属）。块名锁定的是业务角色，不是技术实现。
常见错误：把 video-player 块强行复用作背景视频。它内部有 controls、progress 等子元素，而背景视频根本不需要这些——混用会导致 CSS 冗余、JS 逻辑污染、BEM 层级断裂。
-
hero-video只包含hero-video__media（video 元素）和可选的hero-video__poster（封面图） - 所有与播放控制、进度条、音量无关的类名，一律不出现
- 修饰符只描述状态：
hero-video--loading、hero-video--error、hero-video--fallback，不写--1080p或--cover
子元素必须严格遵循 BEM 嵌套规则，禁用 grid-area “借用”外部类名
有人在 .hero-video__container 上设 display: grid，再给 .hero-video__media 加 grid-area: media —— 这违反 BEM 核心原则。BEM 要求子元素类名必须完整携带父块路径，不能靠 grid-area 把其他 Block 的类“塞”进来。
真正合规的做法是：所有布局控制由父容器承担，子元素只负责自身渲染行为。
-
.hero-video设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; -
.hero-video__media仅负责视频本身：width: 100%; height: 100%; object-fit: cover; display: block; - 若需遮罩层，应为
.hero-video__overlay，而非复用.modal__overlay—— 即使样式相同，也必须独立声明，保证作用域隔离
修饰符要绑定 DOM 状态，不用纯 CSS 类切换全屏态
写 .hero-video__fullscreen-btn--active 表示按钮当前处于激活态，这没问题；但若用它来控制视频是否全屏，就错了。全屏是 document 级状态，CSS 类无法可靠反映 document.fullscreenElement 的真实值。
正确方式是 JS 动态写入 data-fullscreen="true" 到根容器，再用属性选择器驱动样式：
body:is([data-fullscreen="true"]) .hero-video {
z-index: 9999;
}
.hero-video__fullscreen-btn[data-fullscreen="true"] {
/* 按钮图标变「退出」 */
}
- 避免用
.hero-video--fullscreen这类修饰符控制布局——它无法同步 document 全屏 API 的异步状态 - 移动端 iOS Safari 不支持
requestFullscreen()，此时data-fullscreen应设为"unsupported"，而非删掉属性 - 所有依赖全屏状态的样式，统一走
[data-fullscreen]属性选择器，不混用 class 和 data
z-index 失效时别硬调数字，先查 stacking context 断裂点
遮罩层被视频盖住，不是 z-index: 9999 不够大，而是 video 元素默认触发了独立 stacking context（尤其加了 transform 或 will-change），导致同级 div 的 z-index 失去比较意义。
修复不是堆数字，而是收束层级结构：
- 给遮罩层的**直接父容器**加
isolation: isolate，强制它成为新的 stacking context 根 - 确保
.hero-video__overlay和.hero-video__media是同一父元素的直系子元素，不要隔多层 wrapper - 删掉 video 上所有
transform、will-change，除非真有性能瓶颈；静音背景视频通常不需要 GPU 加速 - 移动端必须同时存在
muted、autoplay、playsinline三个属性，否则 video 不加载，自然没有尺寸，遮罩定位全乱
BEM 在这里不是命名游戏，而是约束组件边界——每个块只管自己该管的事，状态靠 data 属性透出，样式靠嵌套路径隔离，层级靠 isolation 收口。稍一越界，就会在全屏这种强视觉场景里立刻暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
