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">),<code>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 实例,直接复用:
- 二级项
如果需要视觉区分(比如缩进、图标),用 Modifier:list--nested 或 list__item--nested,而不是靠类名层级表达嵌套关系。DOM 可以深,类名必须平。











