Accordion容器的BEM根类名必须为accordion；面板项为accordion__item，其子元素严格使用accordion__header和accordion__body；状态修饰符仅作用于accordion__item，如accordion__item--expanded；JS应配合data属性而非js-类名。
Accordion容器的BEM根类名怎么定
根元素必须用 accordion 作为块名，这是BEM约定里唯一可接受的基类——不能叫 collapse、panel-group 或带业务前缀的 user-profile-accordion。BEM强调复用性，业务语义应通过修饰符或父级上下文表达，而不是污染块名。
常见错误是把根类写成 accordion-wrapper 或 js-accordion：前者违反“块不描述结构”，后者混入JS钩子，破坏关注点分离。
- ✅ 正确：
accordion - ❌ 错误：
accordion-container、js-accordion-root、ui-accordion
每个面板项（item）的BEM嵌套层级怎么写
每个可展开/收起的面板单元必须是 accordion__item，它直接子元素中：标题用 accordion__header，内容区用 accordion__body。三者必须同级且严格嵌套在 accordion 下，不能跳级或错位。
容易踩的坑是把 accordion__header 和 accordion__body 放到 accordion__item 外面，或者用 accordion__panel 这类非标准命名——BEM没有“panel”这个通用块，它只是 accordion 的一个内部元素。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确结构：
<div class="accordion"> <div class="accordion__item"> <button class="accordion__header">标题</button> <div class="accordion__body">内容</div> </div> </div> - ❌ 错误：用
accordion-panel、accordion-item-header（双下划线只能出现在块与元素之间，不能用于元素再分层）
展开状态和禁用状态的修饰符怎么加
状态类必须用 accordion__item--expanded 和 accordion__item--disabled，修饰符永远作用于具体元素（这里是 __item），而不是根块或 header/body 单独加。这样能确保CSS作用域清晰，JS切换状态时也只需操作一个class。
别用 is-expanded 这种通用状态名——它脱离了BEM上下文，无法从类名反推所属块；也别给 accordion__header 单独加 --active，因为“激活”是 item 的整体状态，不是 header 的视觉样式。
- ✅ 正确：
accordion__item--expanded、accordion__item--disabled - ❌ 错误：
is-open、accordion__header--active、accordion--expanded（根块不承载状态）
需要JS控制时，类名和data属性怎么配合
JS只负责添加/移除BEM类，不引入新类名。如果需标记可交互区域，用 data-accordion-target 指向对应 accordion__body 的ID，而不是加 js-accordion-toggle 这类类名——后者会让CSS和JS产生隐式耦合，改样式时不敢动类名。
性能上，避免对 accordion__body 做 height 动画（触发重排），优先用 max-height + overflow: hidden 或现代方案 transform: scaleY() + overflow: hidden。BEM类名本身不影响性能，但错误的动画实现会拖慢折叠体验。
- ✅ 推荐：
<button class="accordion__header" data-accordion-target="body-1"></button>+<div id="body-1" class="accordion__body"> <li>❌ 不推荐：用 <code>js-accordion-btn控制逻辑，或对accordion__body直接写height: auto动画
BEM不是命名游戏，而是让每个类名都能回答三个问题：它属于哪个功能块？它在这个块里是什么角色？它当前处于什么状态？漏掉任一环，后续维护时就容易出现“这个class到底管不管用body的padding”的困惑。
