原生select不支持bem，因其内部结构由浏览器控制、dom不可控；bem仅适用于自定义下拉组件（如dropdown），需显式写出dropdown__toggle和dropdown__menu等可映射的真实元素，并确保结构严格符合命名契约。
下拉选择框（select）本身不支持 BEM 式的 DOM 扩展，所以「在原生 select 上写 BEM」是伪命题——真正要定义 BEM 层级的，是你用 HTML/CSS/JS 重写的那个自定义下拉组件，比如 dropdown。
为什么不能给原生 select 套 BEM 类名
原生 select 的内部结构（下拉箭头、选项列表）由浏览器控制，无法通过 CSS 类名精确挂载 __toggle 或 __menu；你加的 class="select__trigger" 只会挂在 <select></select> 标签上，但它的视觉“触发区”和“菜单”根本不在同一 DOM 层级，BEM 所依赖的「命名即结构」前提就崩了。
- 所有 BEM 类名必须能一对一映射到真实、可控的 HTML 元素
-
select的<option></option>是封闭子节点，无法加dropdown__item类 - 浏览器渲染的下拉面板不在页面 DOM 树中（多数情况挂载在
body下），CSS 选择器完全失效
dropdown 必须是独立 block，且包含完整 DOM 结构
一个可维护的下拉组件，HTML 必须显式写出 dropdown__toggle 和 dropdown__menu，并保证二者关系可控：
<div class="dropdown">
<button class="dropdown__toggle" aria-haspopup="true" aria-expanded="false">选择城市</button>
<div class="dropdown__menu" role="menu">
<div class="dropdown__item" role="menuitem">北京</div>
<div class="dropdown__item" role="menuitem">上海</div>
</div>
</div>
-
dropdown是 block，不是nav__dropdown或form__select -
dropdown__menu必须是dropdown的直接子元素，或与dropdown__toggle紧邻兄弟 —— 否则:hover + .dropdown__menu或:has(.dropdown__toggle:focus-within)会断链 -
dropdown__item是 element，不是dropdown__menu__item（BEM 禁止双下划线嵌套）
多级下拉不是“层级加深”，而是 dropdown 实例嵌套
二级菜单不是 dropdown__submenu，而是另一个 dropdown 实例，放在上层 dropdown__menu 内部：
<div class="dropdown__menu">
<div class="dropdown__item">电商</div>
<div class="dropdown__item">
<span>内容平台</span>
<div class="dropdown">
<button class="dropdown__toggle" aria-haspopup="true">展开</button>
<div class="dropdown__menu">
<div class="dropdown__item">文章</div>
<div class="dropdown__item">视频</div>
</div>
</div>
</div>
</div>
- 每个
dropdown都有自己完整的交互逻辑（显隐、焦点管理、键盘导航） - 修饰符用于区分行为差异：
dropdown--click、dropdown--hover、dropdown--mega，而不是靠父级类名推导 - 若用 JS 控制显隐，始终用
display: none或visibility: hidden切换，别remove()—— 否则 BEM 结构断裂，类名还在但 DOM 消失
最常被忽略的一点：BEM 层级不是写出来的，是结构定死的。你写 dropdown__menu 这个类名，就等于承诺它一定存在、一定在正确位置、一定没被框架 wrapper 或过渡动画节点隔开。一旦 DOM 结构偏离这个契约，所有基于 BEM 的样式和 JS 行为都会静默失效 —— 而这种问题，在 DevTools 里根本看不出报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
