轮播图指示器必须命名为carousel__indicator、控制按钮为carousel__control--prev/--next，禁用态用carousel__control--disabled，激活态仅用carousel__indicator--active，垂直轮播须新建carousel-vertical块。
轮播图指示器必须命名为 carousel__indicator，切换项（左右按钮）必须命名为 carousel__control，并用 --prev 和 --next 修饰符区分方向——写错一个下划线或拼错词，就会导致事件委托失效、样式串扰、BEM 工具链报错。
为什么不能叫 carousel-indicator 或 dot？
浏览器事件委托和构建工具（如 postcss-bem-linter）都依赖严格的双下划线语法。写成 carousel-indicator 会被识别为独立 Block，不是 carousel 的子元素；写成 dot 更是完全脱离上下文，复用到弹窗或表单里时，样式会意外覆盖其他 dot 类名。
移动端尤其敏感：touchstart 事件通常委托到 .carousel__indicator 上，类名不统一，点击就收不到回调。
-
carousel__indicator✅ 是标准 Element，语义清晰、可复用、可被精准选中 -
carousel-indicator❌ 缺少__，BEM 解析器报错，CSS 作用域断裂 -
dot❌ 独立 Block，无上下文约束，极易污染全局样式
carousel__control 的修饰符必须只表达方向，不掺业务逻辑
左右按钮不是两个不同组件，而是同一控制单元的两种变体。修饰符只能描述“它是什么”，不能描述“它能不能点”——后者是状态，由另一个修饰符承担。
-
carousel__control--prev✅ 合法，仅表示“上一项控制按钮” -
carousel__control--next✅ 合法，仅表示“下一项控制按钮” -
carousel__control--disabled✅ 合法，单独表达禁用态，可与 --prev/--next 平级共存 -
carousel__prev-btn❌ 错误命名，破坏块一致性，JS 无法统一查.carousel__control -
carousel__control--prev--disabled❌ 禁止嵌套修饰符，BEM 不支持链式状态
实际 JS 控制时，应这样写：el.classList.toggle('carousel__control--disabled', isAtFirst)，而不是拼接字符串。
激活态只允许 carousel__indicator--active，禁止序号类名
指示器没有“第几个”的语义，只有“当前是否激活”这一个维度。用 carousel__indicator--1 这类写法等于放弃 BEM，后续加自动播放、键盘导航、SSR 都会出问题。
-
carousel__indicator--active✅ 正确，状态单一、可预测、工具链友好 -
carousel__indicator-active❌ 少一个_，BEM 解析器当它是新元素carousel__indicator-active，而非carousel__indicator的修饰符 -
carousel__indicator--2❌ 序号类名不可扩展，JS 切换需硬编码索引，维护成本爆炸
序号信息应由 data-index 或 aria-current 承载，class 只管视觉状态。
垂直轮播不能用 carousel--vertical，得新建 carousel-vertical 块
水平和垂直轮播在 DOM 结构、transform 轴向、指示器排布、分页计算上完全不同。硬塞进一个块，CSS 会堆满 @supports 和 @media 分支，JS 里全是 if (isVertical) {...}。
- 水平场景：保持
carousel块名，用carousel__indicator、carousel__track - 垂直场景：新建
carousel-vertical块，配套carousel-vertical__indicator、carousel-vertical__track - 共用基础类如
is-hidden可以，但flex-direction、transform轴向、touch-action必须彻底隔离
最容易被忽略的是：carousel--vertical 看似省事，实则让所有垂直逻辑都卡在 CSS 选择器权重和 JS 条件判断里，一改就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
