正确命名是 carousel__indicator，它是轮播图容器的子元素而非独立组件；激活态用 carousel__indicator--active；容器 carousel__container 仅承载约束，轨道 carousel__track 负责位移；垂直轮播应另起块名 carousel-vertical 而非修饰符；指示器点击逻辑不应体现在类名中。
指示器元素该用 bem-block__element--modifier 还是 bem-block__element？
指示器（dots）本质是轮播图容器的子功能单元，不是独立组件，所以必须作为 carousel 的子元素存在，不能单独抽象成 dot 块。正确命名是 carousel__indicator —— 它是容器的「指示器」，不是「一个指示器」。如果加状态（如当前激活），用修饰符 carousel__indicator--active，而不是 carousel__indicator-active（后者违反 BEM 双下划线规则）。
常见错误：
• 写成 dot 或 indicator 独立块名 → 导致样式脱离上下文，复用时无法约束作用域
• 激活态写成 carousel__indicator-active → BEM 解析器/开发者会误判为另一个元素，破坏语义层级
移动端特别注意：指示器常需 touch 适配，命名稳定才能精准绑定 touchstart 事件委托到 .carousel__indicator 上。
carousel__container 和 carousel__track 的职责怎么划清？
容器（carousel__container）只负责「承载与约束」：设固定宽高、overflow: hidden、定位上下文（如 position: relative）。它不参与滑动逻辑。
真正做位移的是内部轨道（carousel__track）：它包裹所有 carousel__slide，宽度为单张宽度 × slide 数，通过 transform: translateX() 或 scrollLeft 实现滚动。两者必须严格分离，否则 CSS 动画卡顿、JS 计算偏移量会出错。
实操建议：
• carousel__container 加 will-change: transform（仅当内部有频繁 transform 时）
• carousel__track 必须设 display: flex 或 white-space: nowrap 防止换行
• 不要在 carousel__container 上写 transform，那会干扰子元素的 transform 层级
为什么移动端轮播图不该用 carousel--vertical 这类修饰符？
垂直轮播在移动端极少单独存在，且交互逻辑（如 swipeY vs swipeX）、指示器排布（横向 dots 变纵向 bars）、甚至分页逻辑都完全不同。强行用修饰符统一处理，会导致 CSS 膨胀、JS 判断分支增多、可维护性骤降。
更合理做法：
• 水平轮播保持 carousel 块名
• 垂直场景另起块名，如 carousel-vertical（新块，非修饰符）
• 共享基础工具类（如 is-hidden、is-swiping），但不共享结构样式
性能影响：carousel--vertical 往往需要重写 carousel__indicator 的 flex-direction、transform 方向、甚至 touch 事件坐标计算方式，实际代码量和测试成本远超新建一个轻量块。
指示器点击跳转时，如何避免命名泄露 JS 实现细节？
BEM 命名只描述 UI 角色，不暴露 JS 行为。比如不要叫 carousel__indicator--js-clickable 或 carousel__indicator--bound —— 这类名字会让后续接手的人误以为“没这个类就不能点”，而实际点击逻辑应由 JS 统一绑定到 .carousel__indicator，再通过 data-index 或 DOM 位置读取目标 slide。
正确做法：
• 指示器默认就是可交互的，命名保持语义中立：carousel__indicator
• 当前激活态用 carousel__indicator--active（纯视觉反馈）
• 若某指示器临时禁用（如 loading 中），用 carousel__indicator--disabled，而非 JS 专用类名
容易被忽略的一点：移动端 click 有 300ms 延迟，但 BEM 命名本身不影响这点；真正要处理的是在 JS 中监听 touchend 并 preventDefault，而这个逻辑和 class 名字无关——别让命名承担本该由 JS 清晰表达的责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
