BEM中list__item__text非法，因__仅限Block与直接子Element间；深层文本应升格为独立Block（如heading）或用Modifier（如list__item--has-title）。
list__item 是合法的，list__item__text 就越界了
BEM 只允许 block__element 两级结构，list__item 是标准写法，表示 item 是 list 的直属子部件；但一旦出现 list__item__text，就等于把 list__item 当作新 Block，而它实际只是 list 的一个 Element，没有资格承载子 Element。这种命名在浏览器里不报错，但会切断语义链：改个 DOM 结构（比如给 item 包一层 <div class="wrapper">），list__item__text 就彻底失效。
深层文本内容该用什么命名？看复用性，不是看 HTML 嵌套深度
遇到 <li><h3>标题</h3><p>描述</p></li> 这类结构，别急着写 list__item__title。先问一句：这个标题会不会用在卡片、弹窗、侧边栏里？
- 会复用 → 升格为独立 Block：
heading或text-block，再加 Modifier 控制上下文，如heading--in-list-item - 几乎只在这里用，且样式强依赖 item 容器 → 用 Modifier：
list__item--has-title，然后靠list__item内部布局控制子节点样式 - 纯装饰性小图标或徽标 → 用 State 类或 data 属性：
class="list__item is-expanded"或data-role="subtitle"
SCSS 里嵌套写法容易踩坑
写 .list { &__item { &__title { } } } 看似方便，但编译后是非法的 list__item__title，还容易误导后续维护者给 list__item 加 padding，破坏 Element 的纯展示职责。SCSS 中唯一安全的嵌套是：
-
&__item（生成list__item） -
&--compact（生成list--compact） -
&:hover（伪类）
其他任何形式的嵌套，比如 &__item { .title { } } 或 &__item { &__title { } }，都应禁用。
立即学习“前端免费学习笔记（深入）”；
list__item 里放另一个 list 怎么办？
常见于多级菜单或嵌套评论。这时不要写 list__item__submenu 或 list__item__children。正确做法是：子列表就是另一个独立 list 实例，直接复用：
<li class="list__item">
一级项
<ul class="list">
<li class="list__item">二级项</li>
</ul>
</li>
如果需要视觉区分（比如缩进、图标），用 Modifier：list--nested 或 list__item--nested，而不是靠类名层级表达嵌套关系。DOM 可以深，类名必须平。
