list 必须是独立 block，而非 card__body 的子元素；应使用 list--in-card 等 modifier 适配上下文，禁止后代选择器；list__item 不可用 --odd 等序号修饰符，须用 .list__item:nth-child(odd)；多级嵌套仍用 list + modifier，不新增 block。
list 必须是独立 Block，不是 card__body 的子元素
看到 card__body__list__item 这种写法，第一反应不是“怎么改名”，而是“list 为什么没被提级”。只要列表结构（ul/ol + li）在侧边栏、弹窗、表单里也出现过，它就该是独立 list Block。强行塞进 card__body 下，等于放弃复用能力，也把样式逻辑绑死在卡片容器里。
常见错误现象：
• DOM 里写了 <ul class="card__body__list"></ul>，但 CSS 文件里找不到对应规则，因为开发者误以为“父类存在，子类就能推导”
• JS 查询时写 el.querySelector('.card__body__list')，结果换到新页面就返回 null，因为那里用的是 .list
- 正确结构：
<ul class="list"><li class="list__item"></ul> - 若需上下文适配（如卡片内缩进更小），加 Modifier：
list--in-card，而不是靠父类名推导 - 禁止写
.card__body .list这类后代选择器——它依赖 DOM 层级，一加 wrapper 就失效
list__item 不该带序号修饰符（如 --odd）
list__item--odd 是反模式。交替色由 DOM 顺序决定，不是业务状态；手动打标既冗余又易错，动态增删项后序号立刻脱节。BEM 修饰符该管的是可交互状态（如 list__item--selected）或语义变体（如 list__item--divider），不是位置索引。
安全写法只有一条：.list__item:nth-child(odd)，且必须带块级前缀限定作用域：
.list__item:nth-child(odd) {
background-color: var(--list-bg-odd, #f9f9f9);
}
- 用
:nth-child，不是:nth-of-type——只要列表结构是纯li，它更稳定 - 务必写全路径：
.list__item，不能只写li，否则可能误中第三方组件里的li - fallback 不可省：
var(--list-bg-odd, #f9f9f9)，防止变量未定义时背景透明
悬停、选中等状态必须显式覆盖交替色
交替色只是底层基底，:hover、:checked 等状态是覆盖层。如果不显式声明，会被交替背景盖住——尤其暗色模式下，浅色 hover 背景可能完全不可见。
-
.list__item:hover必须重设background-color，例如：var(--list-bg-hover, #eef7ff) - 多选场景下，兄弟选择器如
.list__item input[type="checkbox"]:checked + .list__item要确保背景足够强，避免视觉层次混乱 - 禁用态建议用
opacity或filter，而非仅改背景色——否则和交替色叠加后对比度失控
嵌套评论这类多级结构，仍用 list + Modifier，不新增 block
评论系统里“回复的回复”看似需要新 block，但实际仍可用 list 承载：每层回复都是独立 list，靠 list--nested 控制缩进和字号。没必要为“二级回复”单独建 reply-list block——它没有独立逻辑、不跨上下文复用，只是同一数据结构的位置变体。
- DOM 结构自然嵌套：
<li class="list__item"><ul class="list list--nested"></ul></li> - CSS 只写
.list--nested规则，不写.list__item .list这类后代选择器 - JS 查询统一用
document.querySelectorAll('.list')，不用关心嵌套深度
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
