推荐使用bem规范命名视差容器：以.parallax为block，子元素用.parallax__bg、.parallax__content等双下划线分隔，修饰符用--连接，如.parallax__bg--grayscale；禁用id和内联样式，确保样式可预测、可复用、易维护。
视差容器类名怎么起才不混乱
视差滚动的 DOM 层级容易嵌套过深，比如背景层、内容层、遮罩层混在一起，不用规范命名，后期改一个 background-position 都得全局搜 .layer。BEM 的核心是让每个类名自解释，且避免样式污染。
推荐结构：.parallax 为 Block，所有子元素必须带 Block 前缀；用双下划线（__）分隔元素，单中划线（--）表示修饰符。不建议用 .parallax-bg 这类模糊命名——它既像 Block 又像 Element，破坏 BEM 的可预测性。
-
.parallax：最外层容器，负责overflow: hidden和高度控制 -
.parallax__bg：纯背景图层，仅设background-image和background-attachment: fixed -
.parallax__content：前景内容区，通常用transform: translateY()动态偏移 -
.parallax__mask：可选遮罩层，用于压暗背景提升文字可读性
为什么不能给视差层加 ID 或内联 style
ID 选择器优先级高（100），一旦和 .parallax__bg--faded 冲突，就得靠 !important 救火；内联 style 更糟——它优先级 1000，直接封死 CSS 覆盖路径，JS 动态改 style.transform 时还容易覆盖掉关键 will-change 声明。
BEM 类名天然支持组合与复用。比如同一套视差逻辑用在产品页和首页，只需切换修饰符：.parallax--slow 控制滚动速率，.parallax--mobile-off 在小屏禁用动画，全部走 class 切换，不碰 HTML 结构或 JS 逻辑。
- 禁止：
id="hero-parallax-bg"、style="transform: translateZ(0)" - 允许：
class="parallax parallax--hero"、class="parallax__bg parallax__bg--dark" - JS 操作只改 class：
el.classList.toggle('parallax__bg--faded')，不操作style
修饰符（Modifier）该挂在哪一级
修饰符必须作用于它所修饰的 Block 或 Element，不能“越级”。比如想让某个视差区块的背景图变灰，应写 .parallax__bg--grayscale，而不是 .parallax--grayscale——后者会错误地影响整个容器内所有子元素，包括文字和按钮。
常见误用：.parallax--has-mask 看似合理，但实际掩盖了语义：到底是哪个元素有 mask？是 __bg 上叠了一层，还是 __content 自带半透明背景？BEM 要求问题定位到具体 Element。
- 正确：
.parallax__mask--blur（强调遮罩本身的模糊效果） - 正确：
.parallax__content--centered（内容居中是内容层自己的行为） - 错误：
.parallax--centered（没说明谁被居中，违反单一职责） - 错误：
.parallax__bg--centered（background-position居中是默认行为，不该用修饰符表达）
响应式降级时类名要不要变
要，而且必须显式声明。移动端视差常被禁用（因性能/触摸体验），但不能靠媒体查询里把 .parallax__bg 的 background-attachment 改成 scroll 就完事——这会让开发者误以为“还在运行视差”，而实际已失效。
标准做法是加一层降级修饰符：.parallax--no-parallax，并在 CSS 中用 .parallax--no-parallax .parallax__bg 覆盖所有视差相关声明。这样 JS 也能通过检查 class 知道当前状态，比如是否跳过 requestAnimationFrame 更新。
- PC 端：
class="parallax parallax--hero" - 移动端 JS 注入：
class="parallax parallax--hero parallax--no-parallax" - CSS 中明确写：
.parallax--no-parallax .parallax__bg { background-attachment: scroll; transform: none; } - 避免只靠
@media (max-width: 768px)隐藏动画，那不是降级，是隐藏 bug
transform: translateZ(0) 是否生效、will-change 是否触发硬件加速，就会变成猜谜。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
