卡片组件的BEM根类名必须是语义化、可复用的独立功能单元，如news-card；禁用box、wrap等结构暗示名，card__list-item为合法子元素，card__list-item--read为正确状态修饰符。
卡片组件的BEM根类名怎么定？
必须用语义化、可复用的块名，不能带结构暗示。比如 card 比 box 或 wrap 更准确；如果业务里叫“资讯卡片”，就该用 news-card，而不是 info-box —— 后者既不匹配 BEM 的「块 = 独立功能单元」原则，又容易和其它模块冲突。
常见错误是把容器结构当块名：card-content 不该作为根块，它只是 card 内部的一个元素；card__list 才是合法的子元素名，而 card-content__item 就属于越级嵌套，破坏了 BEM 的扁平层级约束。
列表项（li）该用 __item 还是 __list-item？
优先用 __list-item。因为 __item 太泛：它可能被用在轮播、菜单、筛选标签等多个上下文中，一旦 CSS 复用或抽离组件，就容易产生样式污染或覆盖冲突。
card__list-item 明确表达了「这是卡片内列表的某一项」，语义封闭、作用域清晰。实际开发中，如果你发现多个地方都写 __item，大概率说明块命名不够具体，或者该抽一个独立的 list 块出来复用。
无序列表项的典型写法：
.card__list {
list-style: none;
padding: 0;
}
.card__list-item {
padding: 8px 12px;
border-bottom: 1px solid #eee;
}
.card__list-item:last-child {
border-bottom: none;
}
带图标/状态的列表项如何扩展修饰符？
修饰符必须绑定在 __list-item 上，而不是另起新元素类名。比如「已读」「高亮」「禁用」这些状态，统一用 card__list-item--read、card__list-item--highlighted，而不是 card__list-item-read（缺修饰符双横线）或 card__list-item-state（语义模糊）。
关键判断标准：这个类是否只改变 __list-item 自身的外观或行为？如果是，就用修饰符；如果它引入了新结构（如额外图标容器），才需要新增元素，例如 card__list-item-icon。
常见陷阱：
-
card__list-item--active和card__list-item.is-active混用（BEM 推荐纯类名修饰符，避免 JS 驱动类名与样式类名分离） - 给
__list-item加--icon-left但没配套定义图标位置逻辑，导致布局错乱 - 用
card__list-item__icon—— 元素名不能嵌套在元素名下，违反 BEM 规则
要不要为列表单独抽一个 list 块？
取决于复用性。如果这个列表结构（含间距、字体、交互反馈）在其他组件里也高频出现，比如侧边栏菜单、弹窗选项、用户列表，那就该拆成独立块 list + list__item，再通过组合使用：card__content list list--compact。
但多数业务卡片里的列表是定制化的：顶部有标题、末尾有「查看更多」链接、每项带徽标和操作按钮。这种情况下硬抽 list 块反而增加理解成本和维护负担——样式耦合深、改动易破局。
简单判断法：打开项目搜索 list__item，如果结果超过 3 个不同上下文且视觉一致，再考虑抽象；否则老老实实用 card__list-item 更稳。
BEM 最难的地方不是命名规则，而是每次加一个类名时，得想清楚：它是临时适配，还是长期契约。卡片里的列表项，往往前者居多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
