tree__toggle必须紧邻tree__children以确保css选择器匹配和动画生效；子树须复用tree块而非嵌套命名；展开状态类必须加在tree__toggle上；图标应统一用tree__item__icon及其修饰符。
tree__toggle 必须紧邻 tree__children
DOM结构错位是树节点动画失效、JS定位失败的最常见原因。BEM要求tree__toggle和tree__children必须是兄弟元素，且tree__children必须紧跟在tree__toggle之后。不能用div包装、不能插入空文本节点、不能被React Fragment或包裹。
常见错误写法：<div class="tree__item">
<span class="tree__toggle">●</span><div><div class="tree__children">...</div></div>
</div>
这样会导致CSS中.tree__toggle--expanded + .tree__children选择器完全不匹配。
正确结构示例：<div class="tree__item">
<span class="tree__toggle">●</span><div class="tree__children">...</div>
</div>
子树必须复用 tree 块，而非嵌套元素名
不要写tree__item__subtree或tree__children__item——BEM禁止元素再包含子元素。树的递归性靠块复用实现：每个tree__children内部直接放一个完整的tree块。
这样做能保证：
- 每个tree有独立的展开/收起逻辑、键盘导航和可访问性属性
- CSS定位（如position: absolute）可相对父tree__item生效
- 子树可被任意挪到侧边栏、弹窗等新上下文，无需重写样式
错误：<div class="tree__children"><div class="tree__item__subtree">...</div></div>
正确：<div class="tree__children"><div class="tree"><div class="tree__item">...</div></div></div>
展开状态类必须落在触发元素上，不是内容区
tree__toggle--expanded必须加在用户点击的那个元素（即tree__toggle）上，而不是tree__children。这是BEM对“状态归属”的硬性要求：谁响应交互，状态就标记在谁身上。
常见后果：
- tree__children--expanded加了但max-height动画不触发
- 键盘聚焦时图标旋转与内容显隐不同步
- 屏幕阅读器无法感知当前节点是否已展开
正确配合方式：
- JS切换tree__toggle--expanded（控制图标旋转、背景等视觉反馈）
- 同时切换tree__children--expanded（仅负责max-height或transform过渡）
- 二者必须同步，不可只切一个
tree-node__icon 是元素，不是修饰符
展开/折叠图标是节点的固有组成部分，属于tree__item的元素，不是可选状态。因此统一用tree__item__icon，再通过修饰符表达具体行为或状态。
反模式写法：tree__item--has-icon、tree__item--with-expand-icon——这些把实现细节暴露到块级修饰符，破坏块自治性。
推荐命名：
- tree__item__icon：基础图标容器（含SVG或伪元素）
- tree__item__icon--expandable：该节点支持展开（非所有节点都有）
- tree__item__icon--expanded：当前处于展开态（由JS切换）
注意：tree__item__icon即使在折叠态也必须存在并占位，否则布局会跳动。
树形控件里最容易被忽略的是“状态类归属”和“块复用边界”——前者影响可访问性和动画一致性，后者决定组件能否真正解耦复用。一旦在tree<strong>children</strong>上加--expanded，或试图用treeitem__subtree表达层级，后续维护成本会指数上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
