卡片列表的排列模式必须由作用于容器的独立Modifier控制，因CSS的display: grid/flex仅对直接子元素生效；card-list--grid设display: grid，card-list--horizontal设flex+滚动；Modifier须互斥、业务命名、有默认回退。
卡片列表的排列模式（如网格、单列、横向滚动）必须由独立 Modifier 控制，且 Modifier 必须作用于列表容器本身，不能挂到卡片元素上——否则 flex/grid 布局规则不会生效，响应式切换也会失效。
为什么 card-list--grid 必须写在容器上，而不是 card-list__item--grid
因为 CSS 的 display: grid 或 display: flex 只对**直接子元素**起作用。把 Modifier 加在子项上，等于没声明布局上下文：
-
card-list__item--grid不会自动让父容器变成display: grid，它只是个普通类名 - 浏览器看到
<div class="card-list"><div class="card-list__item--grid">，根本不会触发任何网格行为 <li>真正需要的是：<code><div class="card-list card-list--grid"><div class="card-list__item"> <h3> <code>card-list--grid和card-list--horizontal的 CSS 实现差异两种 Modifier 表达不同布局意图，CSS 写法不能混用：
-
card-list--grid：需显式设display: grid+grid-template-columns，例如grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) -
card-list--horizontal：本质是横向滚动容器，应设display: flex+overflow-x: auto+scroll-snap-type: x mandatory，不能用flex-wrap: nowrap代替滚动逻辑 - 两者都需重置子项
card-list__item的flex-shrink: 0或min-width: 0，防止内容撑破布局
如何避免 Modifier 冲突和误删？
多个排列模式 Modifier（如
card-list--grid、card-list--horizontal、card-list--stacked）必须互斥，不能共存。构建工具或 CI 会因 PurgeCSS 误判而删除未显式使用的类：立即学习“前端免费学习笔记（深入）”；
- 禁止在 JS 中动态拼接：
classList.add('card-list--' + layout)—— 这会让 PurgeCSS 无法静态分析 - 正确做法：所有可能用到的 Modifier 都在 CSS 文件中完整写出，哪怕当前没用到
- 命名必须业务导向：
card-list--featured✅（表示“精选位横向滚动”），而非card-list--flex-row❌（暴露实现细节，后续换成 Grid 就名不副实） - 若某页面同时需要网格和横向滚动（如小屏切滚动、大屏切网格），应拆成两个独立 Block：
featured-grid和featured-carousel，而非强行塞进一个列表
最常被忽略的一点：Modifier 的回退行为必须自然。删掉
card-list--grid后，列表应该默认回退到单列流式布局（display: block），而不是留空或崩溃——这意味着基础card-list规则里就得定义好默认流向和间距，不能全靠 Modifier 补全。 -
