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。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别用 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类名本身不影响性能，但错误的动画实现会拖慢折叠体验。

• ✅ 推荐： +
• ❌ 不推荐：用 js-accordion-btn 控制逻辑，或对 accordion__body 直接写 height: auto 动画

BEM不是命名游戏，而是让每个类名都能回答三个问题：它属于哪个功能块？它在这个块里是什么角色？它当前处于什么状态？漏掉任一环，后续维护时就容易出现“这个class到底管不管用body的padding”的困惑。