bem中__仅允许出现在block与其直接子元素之间，list__item__content__text错误地将item当作block，实为职责错位；应提级复用单元为独立block，如list、content、text，并用modifier表达上下文关系。
为什么 list__item__content__text 这类命名一出现就该警觉
这不是命名太长的问题，是组件职责已经错位。BEM 中 __ 只允许出现在 Block 和它的**直接子元素**之间，list__item__content__text 实际在声明 “item 是一个 Block”，但它只是 list 的 Element，没资格当父级。这种写法会导致：
- 改
list__item结构（比如换成list__entry）时，list__item__content__text静默失效 - CSS 里若误写
.list__item .content__text，就退回传统嵌套陷阱，权重高、易冲突、挪位置就断 - 这个类名根本没法复用——把它复制到侧边栏或弹窗里，
list__item__content__text就失去语义支撑
遇到深层列表结构，优先提级为独立 Block
判断标准非常实在：这个 UI 片段会不会在别处出现？只要答案是“会”，它就该是 Block。
-
card__body__list__item__link→ 提级list和link：<ul class="list"><li class="list__item"><a class="link"></a></li></ul> -
dashboard__sidebar__menu__item__icon→ 提级menu和icon：<nav class="menu"><button class="menu__item"><span class="icon"></span></button></nav> - 提级后，原上下文用 Modifier 表达：
list--in-card、menu--in-sidebar，而不是靠父类名推导
list--in-card 和 list__item--compact 的区别必须分清
Modifier 必须依附于它所属的 Block，不能跨层“借壳”。常见混淆点：
-
list__item--in-card❌：item 不具备“在卡片中”这个语义，那是 list 所处的上下文 -
list--in-card✅：list 本身不变，仅在卡片内呈现紧凑样式，CSS 可安全写.list--in-card .list__item（注意：这是唯一可接受的后代选择器，且仅限本 Block 内部） -
list__item--disabled✅：状态属于 item 自身，和位置无关，加在哪都生效 -
list__item--inside-header❌：“inside-” 是坏味道，位置应由布局工具类（如u-mt-sm）控制
React/Vue 中最容易踩的 BEM 隐式嵌套坑
组件库或 CSS-in-JS 容易无意识生成非法嵌套类名，尤其在用 styled-components 或 SCSS & 嵌套时：
-
const List = styled.ul` &__item { } &__item &__link { } `→ 编译出.list__item .list__link，违反 BEM，也破坏单类名匹配优势 - 正确做法：JSX 中显式写全类名
className="list__item"和className="link link--primary"，样式文件里只写.list__item、.link、.link--primary - 用
postcss-bem-linter构建时校验，它能立刻报出list__item__link或&__item &__link这类非法模式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
