cascader和dropdown必须是两个独立block，因前者仅负责数据流转与触发逻辑，后者专司面板定位、键盘导航及动画等ui行为；二者语义分离、复用场景不同，耦合命名如cascader__dropdown会破坏职责边界与可维护性。
为什么cascader和dropdown必须是两个独立Block
因为Cascader只管数据流转和触发逻辑，dropdown才负责面板定位、键盘导航、过渡动画这些UI行为。两者复用场景完全不同：同一个dropdown可能被select、date-picker共用；而cascader在精简模式下甚至可以不渲染下拉面板。一旦写成cascader__dropdown或cascader__menu，就等于把职责强行耦合，后续改一个组件就得连带动另一个。
DOM结构怎么嵌套才不破坏BEM语义
外层必须是cascader，内部直接嵌套一个dropdown实例，不能插任何中间容器或Fragment节点。常见错误是Vue的<transition></transition>或React的<fragment></fragment>把二者隔开，导致.dropdown__menu的:hover或JS显隐失效。
-
正确：
<div class="cascader"><div class="dropdown"></div></div> -
错误：
<div class="cascader"><transition><div class="dropdown"></div></transition></div> -
错误：
<div class="cascader"><div class="cascader__panel"><div class="dropdown"></div></div></div>（cascader__panel破坏Block独立性）
cascader__trigger和cascader__input的职责边界在哪
cascader__trigger是交互入口，要响应focus、click、keydown，并支持cascader__trigger--focused这类修饰符；cascader__input只是纯展示容器，只渲染“浙江 / 杭州 / 西湖区”这种路径文本，不处理用户输入。禁用状态必须统一加在Block层级：cascader--disabled，而不是给trigger或input单独加--disabled——Modifier不是用来拆分控制权的。
多级菜单项的类名怎么命名才不会失控
BEM里没有“三级菜单项”这种东西。所有层级都靠嵌套的dropdown实例承担，每个dropdown内部的dropdown__item语义一致，差异靠Modifier区分，比如dropdown--level-2或dropdown--mega，而不是靠父类前缀模拟层级。
- 一级菜单项：
dropdown__item（第一层dropdown内） - 二级菜单项：
dropdown__item（第二层dropdown内，嵌在上层dropdown__menu中） - 带图标的项应升格为独立Block：
icon-label，而非cascader__item__icon
真正容易被忽略的是：运行时状态类（如is-open、is-loading）必须和BEM类名解耦，不能混用cascader__menu--loading这种写法——它会让状态逻辑和样式强绑定，调试时根本分不清是CSS没生效，还是JS没切对类名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
