bem 中禁止 card__body__list__item 这类四层下划线命名，因 __ 仅限 block 与其直接子 element 之间；list 应升格为独立 block（如 list、list__item），因其具复用性与样式边界。
为什么不能写 card__body__list__item
这种四层下划线类名不是语法错误，而是设计信号：你把本该独立的 list 降级成了 card 的内部装饰。BEM 规定 __ 只能出现在 Block 和它的直接子 Element 之间，card__body 是合法的，但 card__body__list 已经越界——body 不是 Block，它不能拥有自己的 __ 子元素。
遇到“块中块”，先判断是否该拆出新 Block
真实场景里，list 几乎总是可复用的：文章页、侧边栏、弹窗里都可能出现。只要它有自己的一套样式边界、可能被单独测试或复用，就该升格为独立 Block。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错：
<div class="card__body"><ul class="card__body__list">...</ul></div> - 对：
<div class="card__body"><ul class="list">...</ul></div>，再给list__item写独立样式 - 判断标准就一条：
list能否脱离card单独存在？能 → 独立 Block；不能 → 才考虑用 Modifier 或内联样式
需要表达上下文影响时，用 Modifier 而非嵌套 Element
比如卡片里的按钮要变小、圆角更小，这不是“按钮在卡片里”这个位置关系，而是“按钮处于卡片上下文中的紧凑变体”。这时不该写 card__body__button，而应：
- 保持
button是独立 Block - 加 Modifier：
button button--compact或button button--in-card（注意：--in-card是可接受的，只要它代表明确行为，而非纯位置） - CSS 中用
.button--in-card直接定义，不依赖 DOM 层级，避免权重爆炸和样式泄漏
React/Vue 项目里最容易踩的坑：CSS-in-JS 自动嵌套
用 styled-components 或 emotion 时，&__title { &__icon { ... } } 看似省事，实际编译出的是 .block__title .block__icon —— 后代选择器，破坏 BEM 原子性，且无法跨组件复用。
- 正确做法：JSX 中显式写全类名，如
className="button button--in-card" - 避免在样式定义里出现空格，尤其警惕
&__title { .icon { ... } }这种写法 - 如果真需组合逻辑，用属性选择器更可控：
[data-role="card-button"]比card__body__button更轻、更语义化
__ 前停下来问一句：这个东西，会不会在别处出现？有没有自己的样式边界？答案为“是”，就必须给它一个独立 Block 名字。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
