全屏页面bem需按视觉区块切分block并绑定视口级修饰符：hero、feature-grid等应有独立dom根节点；修饰符如--scrolled、--in-view由js控制，反映滚动/视口状态；element命名须体现功能语义而非视觉样式。
全屏沉浸式页面（比如产品介绍页、活动落地页、数字展厅）的CSS结构容易失控，BEM不是“加几个下划线”就能解决的——关键在于块（Block）的粒度划分是否匹配全屏语义，以及修饰符（Modifier）是否真正反映视口级状态（如 is-scrolled、is-mobile-fullscreen），而不是组件级细节。
全屏页面中 Block 的边界怎么划？
别把整个 或 <main></main> 当成一个 Block。那样会导致类名爆炸（main__hero__title--dark 层层嵌套），也违背 BEM “块独立可复用”原则。正确做法是按视觉区块+功能职责切分：
-
hero：首屏大图区，含标题、CTA、背景视频控制 -
feature-grid：功能亮点网格，不依赖 hero 存在 -
timeline：时间轴模块，自带滚动锚点逻辑 -
fullscreen-modal：全屏弹窗，自身具备is-open和is-closing修饰符
每个 Block 都应有明确的 DOM 根节点（如 <section class="hero"></section>），样式作用域严格限定在其内部，不穿透到兄弟 Block。
修饰符命名必须绑定视口行为，而非设备类型
常见错误是写 hero--iphone 或 feature-grid--desktop。这类命名不可维护：iOS 设备尺寸每年变，响应式断点才是可靠依据。你应该用描述“当前状态”的修饰符：
-
hero--scrolled：监听window.scrollY > 50后添加，用于缩略导航栏 -
timeline--in-view：通过 IntersectionObserver 检测进入视口后激活动画 -
fullscreen-modal--locked：禁用 body 滚动时添加，配合body.is-modal-open全局锁
这些修饰符由 JS 控制开关，CSS 只负责定义效果，职责清晰。避免在 CSS 里写 @media (max-width: 768px) + hero--mobile 这种双重判断。
Element 命名要拒绝“视觉描述”，坚持功能语义
全屏页常出现“标题”“按钮”“箭头”等重复元素，但它们在不同 Block 中角色不同。不能统一叫 __title 或 __btn：
-
hero__heading（主视觉标题，带视差位移） -
feature-grid__heading（模块标题，仅字体加粗） -
timeline__marker（时间轴上的圆点标记，非按钮） -
timeline__trigger（触发展开详情的可点击区域）
Element 名称必须体现它在 Block 内的唯一职能。如果两个 Block 都需要“向下滚动提示箭头”，那说明它可能该抽成独立 Block（如 scroll-hint），而不是强行塞进各自 Element 里。
BEM 在全屏页中最容易被忽略的一点：没有为“滚动锁定”“视口尺寸变更”“页面可见性切换”设计对应的全局修饰符。这些状态影响多个 Block，但又不该用 !important 强覆盖——得靠统一的命名约定和 JS 状态同步机制来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
