树形控件必须用独立 block + data-level 属性驱动缩进，每个节点为 tree-node 块；禁用类名嵌套表达层级；图标用 tree-node__icon--modifier 状态修饰符；复杂子内容应升格为独立 block；缩进用 padding-left，tree-node__children 必须为直接子元素。
树形控件的层级关系不能靠类名嵌套深度来表达，必须用独立 block + data-level 属性驱动缩进，否则结构一变、样式全崩。
每个节点必须是独立的 tree-node 块，不是 tree__node 元素
把整棵树塞进一个 tree 块里，再写 tree__node、tree__node__children 这类嵌套，是项目中最常踩的结构性错误。它会让节点无法单独复用、JS 查询失效（比如 document.querySelectorAll('.tree-node') 查不到）、样式泄漏（父级 tree--compact 会意外影响子节点内边距）。
正确做法是让每个节点自身就是 tree-node 块：
-
tree-node自带展开/折叠状态类，如tree-node--expanded - 子节点列表用
tree-node__children，它只是布局容器，不控制子节点样式 - 子节点本身是另一个
tree-node实例，不是tree-node__node或tree-node__children__node
缩进必须用 data-level + 属性选择器，别写 tree-node--level-2
用类名表达层级（如 tree-node--level-2）等于把视觉表现硬编码进 HTML，树深度一变就要批量改 class 名，CSS 也得跟着调。BEM 明确反对这种纯表现类。
缩进是数据驱动的视觉行为，应由 JS 渲染时注入 data-level 属性，CSS 用属性选择器处理：
.tree-node[data-level="0"] { padding-left: 0; }
.tree-node[data-level="1"] { padding-left: 24px; }
.tree-node[data-level="2"] { padding-left: 48px; }
这样 DOM 结构可自由增删层级，样式完全不受影响。
tree-node__icon 状态要用修饰符，不能挂到块上
图标是 tree-node 的固有组成部分，属于元素，不是可选功能。所以统一用 tree-node__icon，再通过修饰符表达状态：
-
tree-node__icon--expandable：表示该节点可展开（非所有节点都有） -
tree-node__icon--expanded：当前处于展开态（由 JS 切换）
禁止写成 tree-node--expanded__icon（语法错误，BEM 不支持修饰符挂载在元素上），也不要用 tree-node--has-icon 这类反模式——它把实现细节暴露到块级，破坏了块的自治性。
复杂子内容要升格为独立 block，别硬套 __ 嵌套
当某个树节点里嵌了带头像、联系人、操作栏的人员卡片，别继续钻 tree-node__content__person-card__avatar 这种深坑。BEM 要求按交互边界切分职责。
此时应将人员信息部分升格为独立 person-card 块：
-
person-card自己管理头像、姓名、电话、操作按钮的样式与状态 -
tree-node只负责排列和缩进，不干预person-card内部结构 - 两者之间用语义化组合：
<div class="tree-node"><div class="person-card"></div></div>
这种拆分让组件真正可复用——同一张 person-card 也能用在搜索结果页或详情弹窗里，而不会被树形控件的样式逻辑绑架。
最易被忽略的一点：缩进用 padding-left 而不是 margin-left，否则点击区域会偏移；tree-node__children 容器必须是 tree-node 的直接子元素，中间插任何 wrapper（比如 Vue 的 <transition></transition> 或 React Fragment）都会导致 JS 展开逻辑或 CSS 悬停选择器失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
