轮播图组件根类名必须带唯一业务前缀，如home-carousel；子元素统一用bem命名，禁用态用--disabled修饰符并配合disabled属性；js应通过类名而非dom结构获取元素。
轮播图组件根类名必须带唯一业务前缀
直接用 carousel 作根名是危险的，尤其在中大型项目里。不同团队或模块可能各自实现轮播图，CSS 会互相污染。必须加业务或项目前缀，比如 home-carousel、product-carousel，确保全局唯一。
根元素写法示例：
<div class="home-carousel"> <div class="home-carousel__track">...</div> <button class="home-carousel__prev"></button> <button class="home-carousel__next"></button> <ol class="home-carousel__indicators">...</ol> </div>
- 所有子元素都基于
home-carousel展开，不嵌套二级 BEM（如不用home-carousel__indicators__item） -
__prev/__next是按钮的标准命名，语义清晰，也方便 JS 绑定事件时用[class*="prev"]或data-action="prev"辅助定位 - 避免用
__arrow这类模糊词——它没说明方向，也不利于可访问性（screen reader 读不出“上一张”）
指示器（indicators）的 item 必须用 __item 后缀
指示器列表通常用 <ol></ol> 包裹，每个圆点/数字是 <li>。BEM 要求它的类名是 home-carousel__indicators__item —— 注意这是合法的双下划线结构，因为 indicators 是一个独立的元素（element），不是修饰符（modifier）。
常见错误写法：home-carousel__indicator（单数，且漏掉 __item）、home-carousel__indicators-item（中间用了短横线，违反 BEM 规范）。
- JS 控制高亮时，推荐用
home-carousel__indicators__item--active，而不是靠:nth-child()或额外 data 属性——这样样式与状态解耦，便于主题切换 - 如果指示器支持文字描述（如“新品首发”），可用
home-carousel__indicators__item-text，但不要脱离__item主干 - 别给
__item加固定宽高：它应由父容器home-carousel__indicators通过display: flex和gap控制布局，保持响应灵活性
按钮禁用态统一用 --disabled 修饰符
轮播图首张时 prev 按钮、末张时 next 按钮需要视觉禁用，同时移除交互。BEM 要求用修饰符（modifier）表达状态，即 home-carousel__prev--disabled。
关键点：
- 必须配合
disabledHTML 属性使用：<button class="home-carousel__prev home-carousel__prev--disabled" disabled></button>，否则键盘用户仍可聚焦、屏幕阅读器可能误读 - 不要只靠
opacity: 0.4实现禁用态——它不阻止 pointer events，也不影响焦点流。要加pointer-events: none和tabindex="-1"（或直接用disabled） - 避免写
home-carousel__prev--is-disabled：BEM 修饰符名不加is-前缀，这是 SMACSS 或其他规范的习惯，混用会降低团队一致性
JS 获取元素时优先查 class，别依赖 DOM 结构
BEM 类名就是你的 JS 选择器契约。轮播图逻辑里，获取按钮或指示器应直接用 document.querySelector(".home-carousel__prev")，而不是 carouselEl.querySelector("button:first-child")。
- DOM 结构可能变（比如加个 loading 插槽、插入埋点 div），但只要类名不变，JS 就稳
- 指示器点击事件委托建议绑定在
.home-carousel__indicators上，再用e.target.matches(".home-carousel__indicators__item")判断，避免给每个 item 单独绑事件 - 如果多个轮播图共存，用
closest(".home-carousel")向上找根节点，比靠parentNode.parentNode安全得多
真正容易被忽略的是：BEM 不是纯 CSS 规范，它是样式、HTML、JS 三方的协作约定。按钮类名写错一个字符，JS 就可能查不到元素，而控制台不会报错——它只会静默失败。所以写完 HTML，立刻用 DevTools 的 Elements 面板验证类名拼写和层级，比跑一遍测试还快。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
