穿梭框应拆分为transfer、transfer-list、transfer-actions、search-input四个独立Block，禁用三层命名如transfer__list__item，因其违反BEM规范且掩盖结构混乱。
穿梭框（Transfer）不是单个 Block，而是多个职责清晰的 Block 组合；强行用 transfer__list__item 这类三层命名，等于把列表、操作按钮、搜索框全塞进一个块里，后期根本没法抽离或复用。
为什么 transfer__list__item 是错的
这是典型的 BEM 红线：Element 不允许嵌套 Element。穿梭框中“列表项”看起来是“列表”的子级，但实际它具备独立交互逻辑（勾选、拖拽、批量操作）、可复用边界（在表格、树、多选下拉中都存在），它本该是 list-item Block，而不是 transfer__list__item。
- 浏览器开发者工具里点开
transfer__list__item，如果它的 DOM 父节点不是<div class="transfer__list">直接子元素（中间隔了ul或div容器），那这个命名就已语义失真 -
transfer__search__input同理——搜索框是独立功能单元，有 placeholder、清空按钮、防抖逻辑，应升为search-inputBlock - 一旦出现三层下划线，说明你正用命名掩盖结构混乱，不是在组织 CSS，是在打补丁
正确的 Block 拆分方式
一个标准穿梭框至少拆成 4 个 Block，每个对应独立文件、独立样式作用域：
-
transfer：仅负责整体容器、左右布局、响应式断点、无障碍属性（aria-live等） -
transfer-list：封装列表渲染、滚动锚定、虚拟滚动逻辑，内部用transfer-list__item（注意：是__item，不是__list__item） -
transfer-actions：控制箭头按钮组，含transfer-actions__button和状态修饰符transfer-actions__button--disabled -
search-input：独立 Block，支持search-input--compact、search-input--with-clear等 Modifier，可被transfer、table、dialog共用
HTML 中每个 Block 的 class 必须单独出现，不混用：<div class="transfer"><div class="transfer-list">...</div><div class="transfer-actions">...</div></div>
立即学习“前端免费学习笔记（深入）”；
元素名必须是 Block 的直系组成部分
transfer-list__item 合法，但前提是它在 DOM 中紧贴 transfer-list 标签下一级。如果实际结构是 <div class="transfer-list"><ul><li class="transfer-list__item">，那 __item 就已脱离直系关系——此时应让 ul 成为 transfer-list__items-container（元素），而 li 仍保持 transfer-list__item，但需确保 SCSS 中不写 &__items-container { &__item { ... } }（这会编译出后代选择器，破坏扁平性）。
- 禁止在 SCSS 里用空格嵌套生成后代选择器：
.transfer-list { &__items-container { &__item { ... } } }→ 错误，生成的是.transfer-list__items-container .transfer-list__item - 正确写法是平级声明：
.transfer-list__items-container { ... }.transfer-list__item { ... }，或用&__item直接挂载在.transfer-list下 - 若
transfer-list__item内部需要图标或复选框，不要写transfer-list__item__icon，而应使用transfer-list__item--with-icon（Modifier）或引入独立 Block 如checkbox
修饰符别乱挂，状态要锚定到具体节点
穿梭框常有“全选中”“无数据”“加载中”等状态，这些不能靠全局 class 控制，必须绑定到对应 Block 或 Element 上：
-
transfer-list--loading✅（列表整体处于加载态） -
transfer-list__item--selected✅（某一项被选中） -
transfer--has-data✅（用于切换空状态提示） -
transfer-list--selected❌（列表本身没有“被选中”这个状态，语义错位） -
transfer-list__item--loading❌（列表项不会自己 loading，是列表在 loading）
多个 Modifier 并列使用时，用空格分隔：class="transfer-list__item transfer-list__item--selected transfer-list__item--disabled"，而不是连写 transfer-list__item--selected--disabled——后者无法被自动化工具识别、不可组合、调试困难。
最易被忽略的一点：BEM 不是字符串拼接游戏，而是对 UI 职责边界的持续校验。每次写新 class 前，先问一句——删掉父级 Block，这个类名还能成立吗？能，它大概率该是 Block；不能，才考虑作为 Element；如果它只表达视觉差异（比如小号、圆角），那就只是 Modifier。
