轮播图bem必须严格拆分为container、track、item、indicator、control五类节点，语义不可合并或省略，否则导致offsetleft偏差、动画卡顿、touch委托失效；垂直轮播须新建carousel-vertical块隔离结构；激活态必须用双下划线--active；移动端事件委托须依赖稳定类名统一监听。
轮播图BEM必须拆成container、track、item、indicator、control五类节点
不是“能跑就行”，而是结构错位会导致JS计算offsetLeft偏差、动画卡顿、移动端touch事件委托失效。这五类节点语义不可合并或省略：
• carousel__container只设width/height、overflow: hidden、position: relative
• carousel__track必须用display: flex或white-space: nowrap，宽度 = 单图宽 × 图片数
• carousel__item只定义flex: 0 0 100%、transition、z-index，不写display: none
• carousel__indicator和carousel__control必须同属carousel块，不能拆成独立dot或carousel-control块
• 所有显隐控制交由carousel__item--active和carousel__indicator--active，JS通过数组索引切换，不用:nth-child()
垂直轮播不能用carousel--vertical修饰符
水平和垂直轮播在transform轴向、flex-direction、分页计算逻辑上完全不同。硬塞进同一个块，CSS会膨胀，JS要加大量if (isVertical)分支。
• 正确做法：新建carousel-vertical块，含自己的carousel-vertical__track、carousel-vertical__indicator
• 共用基础工具类（如is-hidden）可以，但结构样式必须隔离
• 禁止在carousel__track里写flex-direction: column + transform: translateY()混用——这会让carousel块同时承担两种交互范式，维护时谁都改不动
carousel__indicator--active必须双下划线，不能写成carousel__indicator-active
少一个_不是笔误，是BEM语义断裂：
• carousel__indicator--active被解析为“指示器的激活态”，合法修饰符
• carousel__indicator-active被识别为新元素名，等同于carousel__indicator-active和carousel__indicator完全无关
• 后果：CSS规则不生效、团队协作时命名猜错、自动化工具（如stylelint-selector-bem-pattern）直接报错
• 激活态只允许一种：不许出现carousel__indicator--1、carousel__indicator--2这类序号类名，序号信息应由data-index或aria-current承载
移动端事件委托必须依赖稳定类名
在.carousel根节点上统一监听touchstart，再靠event.target.closest()判断来源，这是唯一可靠方案：
• event.target.closest('.carousel__indicator')能精准捕获所有指示器点击
• event.target.closest('.carousel__control')可区分carousel__control--prev和carousel__control--next
• 如果指示器用了dot或indicator这种泛化类名，或控制项用了prev-btn这种非标准命名，事件委托就失去锚点，只能退化为遍历DOM或绑定多个监听器
• 注意：carousel__container可加will-change: transform，但仅当carousel__track真正高频触发transform动画时启用，否则反而拖慢渲染
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
