bem结构中card-list应为独立块，其子卡片必须是独立块card而非card-list__card；子元素用__，状态用--；避免深层嵌套，可复用单元应提取为独立块；伪元素和媒体查询不参与命名。
卡片列表的BEM结构怎么搭才不混乱
BEM要求每个模块有独立作用域，card-list不能只是个容器名——它得是块（Block），所有子元素必须显式归属它。常见错误是把.item或.title写成全局类名，结果一复用就样式冲突。
-
card-list是块，只负责布局和基础间距，不定义卡片内部样式 - 卡片本身必须是另一个块：
card，而不是card-list__card——后者会让card失去独立性，无法在别处复用 - 如果列表需要状态（比如加载中），加修饰符：
card-list--loading，不要用card-list__loader这种元素名
card内部该用__还是--？关键看它是结构还是状态
card作为独立块，它的子元素用双下划线__，状态用双短横--。很多人混淆这两者，导致样式层叠失控。
- 结构类：
card__image、card__content、card__footer—— 这些是固定 DOM 节点，必须存在 - 状态类：
card--featured、card--disabled—— 用于覆盖默认样式，不改变结构 - 禁止写
card__image--rounded：图像是结构，圆角是状态，应拆成card__image+card__image--rounded
如何避免BEM嵌套过深影响维护
卡片列表里嵌套“标签”“作者头像”“操作按钮”，很容易写出 card-list__card__header__title 这种反模式。BEM不禁止多级，但意味着你漏掉了块划分。
- 每个可复用的视觉单元都该是独立块：
tag、avatar、button，而不是card__tag - 用组合而非嵌套：
<div class="card"><div class="tag tag--primary">New</div></div>，而不是card__tag - 如果
tag只在card里出现且行为强耦合（比如自动截断+变色），再考虑card__tag，但优先提取成tag块并用 JS 控制行为
伪元素和媒体查询要不要进BEM命名
BEM命名不处理样式实现细节，所以::before、@media这些不用体现在类名里。但开发者常误加--hover或--mobile，结果导致语义错乱。
-
card__title:hover直接写 CSS 就行，不需要card__title--hover - 响应式变化用媒体查询包裹已有类：
@media (max-width: 768px) { .card-list { flex-direction: column; } } - 只有需要 JS 切换的响应态才加修饰符，比如
card-list--collapsed，且必须由 JS 显式控制 class 切换
真正难的不是写对名字，而是判断某个 UI 片段到底该是独立块，还是当前块的元素——这取决于它是否会在其他上下文复用、是否有独立逻辑或样式契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
