卡片列表的排列模式必须由作用于容器的独立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，它只是个普通类名
• 浏览器看到
  ，根本不会触发任何网格行为
• 真正需要的是：

  card-list--grid 和 card-list--horizontal 的 CSS 实现差异

  两种 Modifier 表达不同布局意图，CSS 写法不能混用：

  

  CSS婚礼策划服务机构宣传网站模板

  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 补全。