BEM规范下拉选择器命名与状态管理

本文深入解析了BEM规范在下拉选择器这一复杂交互组件中的科学应用，强调摒弃简单粗暴的`.select__item--active`式命名，转而通过分层结构（容器、触发区、面板、选项）与职责分离（状态归属根元素而非选项、聚焦/悬停/选中/禁用等状态各司其职）实现语义清晰、可维护性强、无障碍友好的CSS架构；特别指出`--active`应严格保留给瞬时交互态，而“已选中”必须使用语义明确的`.select__option--selected`并由JS精准控制，同时兼顾嵌套分组、键盘导航、ARIA属性同步等真实工程挑战，为构建高质量自定义表单组件提供扎实的BEM实践指南。

下拉选择器的BEM结构该怎么拆解

直接套用 .select__item 和 .select__item--active 在复杂场景下会失控——比如带分组、禁用、悬停、多选、搜索态、键盘聚焦等状态时，类名语义迅速模糊，CSS权重也容易打架。

关键不是“加不加修饰符”，而是把「可交互单元」和「状态载体」拆到不同层级：

• .select 是整体容器（控制宽度、定位、z-index）
• .select__trigger 是点击区域（含箭头图标、输入框或占位文本）
• .select__list 是下拉面板（绝对定位、过渡动画）
• .select__option 是每个可选条目（不负责“激活”，只管渲染）
• .select__option--disabled、.select__option--highlighted 等仅表达静态属性

“当前选中项”不靠 .select__option--active，而由 .select--has-value 作用于根元素，并用 .select__trigger::after 或额外 .select__value 元素承载显示逻辑。这样状态归属清晰，样式不耦合。

激活态该挂在哪一层：trigger 还是 option

用户点选后，视觉上“高亮的是选项”，但逻辑上“激活的是整个 select 组件”。把 --active 修饰符强行加在 .select__option 上，会导致两个问题：一是键盘导航时焦点态与选中态混淆；二是多选模式下无法统一标识“已选中”状态。

正确做法是分层表达：

• 键盘焦点：用 .select__option--focused（仅用于 tabindex 导航）
• 鼠标悬停：用 .select__option--hovered（仅 hover，不替代选中）
• 已选中：用 .select__option--selected（配合 data 属性或 JS 切换）
• 组件级激活（如展开态）：用 .select--open 或 .select--focused 控制 .select__list 显隐

注意：--selected 必须由 JS 主动添加/移除，不能依赖 :checked —— 下拉选项通常不是原生 ，而是自定义 DOM。

遇到嵌套分组（optgroup）怎么命名

原生 的语义在 BEM 里不能丢，但也不能直接写 .select__optgroup —— 它既不是 block，也不是 element，而是结构容器。推荐方案是升一级抽象：

• 用 .select__group 作为分组容器（block-level element）
• 用 .select__group-title 表示分组标题（必须可访问，加 role="group" 和 aria-labelledby）
• 用 .select__group-items 包裹该组所有 .select__option
• 禁止出现 .select__group__option —— BEM 不允许 element 嵌套 element

示例结构：

<div class="select">
  <button class="select__trigger">...</button>
  <div class="select__list">
    <div class="select__group">
      <div class="select__group-title" id="g1">前端</div>
      <div class="select__group-items">
        <div class="select__option select__option--selected" aria-selected="true">React</div>
        <div class="select__option">Vue</div>
      </div>
    </div>
  </div>
</div>

为什么不要用 --active 表达“当前选中”

--active 在 BEM 社区约定中特指“正在被交互的瞬间状态”（类似 :active 伪类），比如按钮按下、菜单项鼠标长按未松开。它持续时间极短，且应由 CSS 自动触发，而非 JS 控制。

把“已选中”叫成 --active，会带来三重混乱：

• CSS 里 .select__option--active 可能被误写成 :active 伪类，导致样式失效
• 无障碍工具（如屏幕阅读器）无法区分“当前焦点”和“已保存选中值”
• 后续加键盘操作（如空格切换选中）时，--active 含义被污染，不得不另造 --checked 或 --selected

真正需要关注的是：JS 更新状态后，是否同步更新 aria-selected、tabindex、以及对应 trigger 的文本/图标？这些比类名更重要。类名只是样式的钩子，不是状态的唯一信源。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《BEM规范下拉选择器命名与状态管理》文章吧，也可关注golang学习网公众号了解相关技术文章。