bem结构应分层：.select为容器，.select__trigger为点击区，.select__list为面板，.select__option为选项；选中态用.select__option--selected，组件激活态用.select--open或.select--focused。
下拉选择器的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 —— 下拉选项通常不是原生 <option></option>，而是自定义 DOM。
遇到嵌套分组（optgroup）怎么命名
原生 <optgroup></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 的文本/图标？这些比类名更重要。类名只是样式的钩子，不是状态的唯一信源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
