每个节点（node）自身就是一个独立的 tree-node 块，而非 tree__node 元素；缩进通过 data-level 属性与 css 属性选择器控制；图标作为 tree-node__icon 元素，用修饰符表达状态；多层嵌套时通过命名空间或宿主块限定作用域，避免样式污染。
树形控件中 BEM 的块（Block）边界怎么划？
树形控件本质是递归结构，但 BEM 要求每个 block 有明确、独立的语义边界。不能把整棵树塞进一个 tree 块里再靠子元素无限嵌套——那样会破坏可复用性，也导致样式泄漏风险。正确做法是：**每个节点（node）自身就是一个独立的 tree-node 块**，而非 tree__node 元素。
这样设计后，缩进、展开/折叠、图标等逻辑都封装在单个节点内部，父节点只负责排列子节点（通过 tree-node__children 容器），不干预子节点样式。
-
tree-node是块，拥有自己的状态类如tree-node--expanded、tree-node--disabled - 子节点列表用
tree-node__children，它只是布局容器，不带业务逻辑 - 子节点本身是另一个
tree-node实例，不是tree-node__node这类冗余嵌套
缩进如何用 BEM 表达而不违反规范？
缩进是视觉表现，不是语义层级，BEM 不鼓励用类名表达“第几级”（比如 tree-node--level-3）。它应由 CSS 层级关系或数据驱动的内联样式控制。
推荐方式是：利用 DOM 嵌套深度 + :scope > .tree-node__children > .tree-node 这类选择器做缩进，或更稳妥地——在 JS 渲染时给每个 tree-node 添加 data-level="2" 属性，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; }
避免写 tree-node--indent-2 这类纯表现类，否则树深度变化时要批量改 HTML 类名。
展开/折叠图标该算元素还是修饰符？
图标是 tree-node 的固有组成部分，属于“元素”，不是可选状态——即使折叠态也要占位，否则布局跳动。因此统一用 tree-node__icon，再配合修饰符表达状态：
-
tree-node__icon：基础图标容器（可含 SVG 或伪元素） -
tree-node__icon--expandable：表示该节点可展开（非所有节点都有） -
tree-node__icon--expanded：当前处于展开态（JS 切换）
不要写成 tree-node--has-icon 或 tree-node--with-expand-icon——这些是反模式：把实现细节暴露到块级修饰符，违背 BEM “块应自治”原则。
多层分支下如何避免样式冲突和命名爆炸？
真正容易被忽略的是：当树形控件被嵌入其他组件（比如 sidebar-menu 或 file-explorer）时，直接复用 tree-node 可能导致样式污染。这时需用命名空间隔离：
- 保持核心
tree-node独立、无上下文假设 - 在宿主块中用嵌套规则限定作用域：
.file-explorer .tree-node { ... }，而非扩展类名如file-explorer__tree-node - 若需定制外观，用修饰符
tree-node--in-file-explorer，而不是新建块
关键点在于：BEM 的“块”是功能单元，不是 DOM 节点层级；缩进、嵌套、状态都应由块自身消化，而不是靠父容器类或深层元素链去控制。否则很快就会写出 tree__item__content__title__text 这种失控结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
