BEM处理树形控件应让每个节点为独立tree-node块，而非深层嵌套元素；缩进用data-level属性+CSS属性选择器控制，tree__toggle与tree__children须紧邻，修饰符需语义化且避免硬编码样式值。
深层嵌套的 CSS 选择器会让树形控件（Tree）样式难以复用、调试困难，且一改就崩；BEM 的正确用法不是给每层加类名，而是让每个节点成为独立 tree-node 块，靠 DOM 层级 + data-level 驱动缩进与状态，彻底避开选择器嵌套。
tree 要拆成多个独立 block，而不是一个大 block 套 N 层元素
常见错误是写一个顶层 tree 块，然后所有子节点都用 tree__item、tree__item__children、tree__item__children__item 这类无限嵌套元素——这违反 BEM「元素不能嵌套元素」铁律，也导致子树无法脱离父上下文复用。
正确做法是：
-
tree只作为容器块，负责初始渲染和键盘导航入口逻辑 - 每个节点自身是一个独立的
tree-node块（不是tree__node），自带tree-node--expanded、tree-node--selected等状态修饰符 - 子节点列表用
tree-node__children容器包裹，里面直接放另一个tree-node实例，不加 wrapper、不加 Fragment - JS 操作时，每个
tree-node可独立 toggle、focus、aria-expanded 切换，无需依赖父级 class
缩进不用嵌套选择器，用 data-level + 属性选择器控制
写 .tree .tree__item .tree__item .tree__item 这种 4 层选择器，浏览器匹配开销指数级上升，DevTools 里 Recalculate Style 时间会明显飙升。而且一旦 HTML 插入中间层，样式全失效。
立即学习“前端免费学习笔记（深入）”；
替代方案是 JS 渲染时为每个 tree-node 注入 data-level="2" 属性，CSS 用属性选择器精准控制：
tree-node[data-level="0"] { margin-left: 0; }
tree-node[data-level="1"] { margin-left: 24px; }
tree-node[data-level="2"] { margin-left: 48px; }
这样缩进与 DOM 结构解耦，移动节点位置、抽离到弹窗或侧边栏都不影响样式。
tree__toggle 和 tree__children 必须紧邻，否则 JS 和 CSS 都会断链
tree-node__toggle 控制展开/收起，tree-node__children 是其直系兄弟元素（不是后代），这是 BEM 递归结构的关键锚点。
如果中间插了 <div class="wrapper"> 或 React Fragment，后果包括：
- CSS 中
tree-node__toggle ~ tree-node__children选择器失效 - JS 里
el.nextElementSibling找不到tree-node__children，展开逻辑崩溃 - 键盘导航中
RightArrow展开时，焦点无法自动落到第一个子节点
务必保证 DOM 结构干净：<div class="tree-node"><button class="tree-node__toggle"></button><div class="tree-node__children"></div></div>
修饰符命名必须表达意图，避免样式泄漏和 PurgeCSS 误删
像 tree-node--indent-24 或 tree-node__icon--size-16 这类修饰符，本质是硬编码样式值，既难维护，又会让 PurgeCSS 无法识别是否被动态使用（比如 clsx(`tree-node--${level}`)）。
推荐方式：
- 用语义化修饰符：
tree-node--disabled、tree-node--loading、tree-node--has-children - 缩进、尺寸等视觉变量统一走 CSS 自定义属性：
--tree-node-indent-step: 24px，由根节点或 theme 类注入 - 动态拼接的修饰符必须进
safelist：safelist: [/--(expanded|disabled|loading)/] - 第三方 Tree 库（如
@radix-ui/react-tree-view）的类名要加whitelistPatterns，否则 PurgeCSS 会清掉rtv-node--expanded
最易被忽略的一点：BEM 不解决“组件怎么递归”，它只规定“每个递归单元该怎么命名”。真正让 tree-node 可以无限嵌套的，是组件设计本身——你得确保每个 tree-node 接收 children 并原样透传渲染，而不是靠 CSS 类名深度来猜层级。
