carousel__container与carousel__track职责必须严格分离：前者仅设宽高、overflow:hidden和position:relative，后者负责flex布局与动态位移；BEM命名须规范，如carousel__indicator--active而非carousel__indicator-active；垂直轮播应新建carousel-vertical块而非修饰符。
carousel__container 和 carousel__track 的职责必须严格分离
容器只管“框住”，轨道才负责“动”。写错会导致 transform 层级混乱、动画卡顿、JS 计算偏移量失准。
-
carousel__container只设width/height、overflow: hidden、position: relative，不写任何transform或scroll相关样式 -
carousel__track必须用display: flex或white-space: nowrap防止子项换行；宽度 = 单张图宽 × 图片数 - 需要频繁位移时，
carousel__container可加will-change: transform，但别滥用——只在真正有 transform 动画的场景下启用
指示器命名必须是 carousel__indicator--active，不是 carousel__indicator-active
少一个下划线就不是修饰符，而是新元素。BEM 解析器和团队协作都会因此误判语义层级。
- ✅ 正确：
carousel__indicator+carousel__indicator--active - ❌ 错误：
carousel__indicator-active（缺双下划线，被识别为独立元素） - ❌ 错误：
dot或indicator独立块名（脱离轮播上下文，复用时样式串扰） - 移动端 touch 事件委托依赖类名稳定，
.carousel__indicator是唯一可靠委托目标
垂直轮播不能用 carousel--vertical，得新建 carousel-vertical 块
水平和垂直轮播在交互逻辑、指示器排布、分页计算上根本不同。硬塞进同一个块，CSS 膨胀、JS 分支爆炸、维护成本翻倍。
- 水平轮播保持
carousel块名 - 垂直场景另起
carousel-vertical，不是修饰符——它有自己的carousel-vertical__indicator、carousel-vertical__track - 共用基础工具类（如
is-hidden）可以，但结构样式、flex-direction、transform 轴向必须彻底隔离 - 用
@media控制响应式断点，别把--mobile或@sm塞进类名里
JS 操作 class 必须与 BEM 规则对齐，禁止拼接序号类名
用 carousel__indicator--1 这类写法等于放弃 BEM，后续加自动播放、键盘导航、服务端渲染都会出问题。
立即学习“前端免费学习笔记（深入）”；
- 激活态只用
carousel__indicator--active，序号信息由 JS 通过data-index或aria-current管理 - 切换指示器优先用
document.querySelectorAll('.carousel__indicator')+ 数组索引，比:nth-child()更稳定 - 控制按钮统一用
carousel__control--prev/carousel__control--next，禁用prev-btn、nextBtn等随意命名 - 第三方组件（如 Element UI）内部也用 BEM，覆盖样式时必须穿透前缀，比如
.el-carousel .carousel__indicator--active
carousel__container 和 carousel__track 的 transform 层级冲突——哪怕只多写一行 transform: translateZ(0) 在容器上，都可能让子元素的动画掉帧。命名看着是小事，但它是整个轮播逻辑能稳定跑起来的第一道锚点。 
