轮播图的指示器和左右箭头必须共用同一bem块名carousel，分别命名为carousel__indicator和carousel__control，后者用--prev/--next修饰符区分方向，禁用状态统一用--disabled修饰符，确保样式隔离、状态同步与事件委托一致。
轮播图的指示器和左右箭头必须共用同一套 BEM 块名，否则样式隔离、状态同步、事件委托都会出问题——它们不是独立功能，而是同一块（carousel）下的不同子元素。
carousel__indicator 和 carousel__control 必须同属一个 block
指示器（dots）和控制按钮（prev/next）语义上都服务于轮播逻辑，不能拆成 dot 和 carousel-control 两个块。否则：
-
carousel__indicator的激活态无法通过 JS 统一控制carousel__control的--disabled状态 - CSS 作用域断裂，比如想让「当前指示器激活时，prev 按钮禁用」就得写跨块选择器，破坏 BEM 封装性
- 移动端 touch 事件委托难统一：无法在
.carousel根节点上用一次event.target.closest('.carousel__indicator')或'.carousel__control'
carousel__control--prev 和 carousel__control--next 是唯一合法变体
左右箭头是同一类控制元素的不同表现，必须用修饰符区分，而不是新元素名：
- ✅ 正确：
carousel__control carousel__control--prev、carousel__control carousel__control--next - ❌ 错误：
carousel__prev-btn、carousel__nextBtn（混用命名风格，且btn是冗余语义） - ❌ 错误：
carousel__button--prev（button不是通用元素名，control更准确，涵盖 a、button、span 等多种实现）
修饰符只表达「方向」这一可枚举变体，不参与业务逻辑判断；禁用状态由 carousel__control--disabled 单独承担，不和方向耦合。
carousel__indicator--active 是唯一允许的状态修饰符
指示器本身没有序号、没有类型，只有「是否当前项」这一个状态维度：
- ✅ 正确：
carousel__indicator carousel__indicator--active - ❌ 错误：
carousel__indicator--1、carousel__indicator--2（违反 BEM，序号应由 JS 控制aria-current或数据属性，而非 class） - ❌ 错误：
carousel__indicator-active（缺双下划线，BEM 解析器会当作新元素，非修饰符） - 性能提示：避免用
nth-child(n)查找指示器，直接用document.querySelectorAll('.carousel__indicator')+ index 同步 slide 索引更稳定
Element UI 等框架中覆盖样式要加深度选择器
第三方轮播组件（如 Element UI）内部也遵循 BEM，但类名带前缀，覆盖时必须穿透：
- 原生类名是
.el-carousel__button，想改箭头大小得写：/deep/.el-carousel__button { width: 24px; height: 24px; } - 指示器圆点对应
.el-carousel__indicators li，但 BEM 推荐改为.el-carousel__indicator语义更清，所以实际覆盖建议：/deep/.el-carousel__indicators .el-carousel__indicator { margin: 0 6px; } - 注意：Vue 3 中
/deep/已废弃，改用::v-deep或 scoped CSS 中的:deep(.el-carousel__button)
真正容易被忽略的是：指示器和控制按钮的 DOM 位置可以不同（比如指示器在底部居中，箭头贴边），但它们的 class 命名层级和状态响应必须严格对齐同一套 BEM 上下文——否则 JS 里维护 active 索引时，稍有不慎就会出现「指示器高亮了，箭头却没禁用」这类视觉与逻辑脱节的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
