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 解析器和团队协作都会因此误判语义层级。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 正确：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) 在容器上，都可能让子元素的动画掉帧。命名看着是小事，但它是整个轮播逻辑能稳定跑起来的第一道锚点。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！