卡片排列应由父容器（如.card-grid）通过媒体查询控制，修饰符（如.card--horizontal）仅表达卡片自身布局意图，不承担断点逻辑；列数等容器级决策不可塞入卡片修饰符，否则破坏语义正交性与复用性。
卡片排列布局该用修饰符还是媒体查询
修饰符只表达意图，不负责断点逻辑。比如 .card--horizontal 表示“横向布局”，但它本身不决定在什么屏幕宽度下生效；真正控制何时切换的，是 @media 规则。硬把断点塞进类名（如 .card--mobile-layout）会让样式无法复用，也破坏 BEM 的语义正交性。
常见错误现象：.card--grid-3 这类命名看似直观，但一旦设计改成交互式两列，就得删类、改 HTML、同步 JS 判断逻辑——它把布局耦合进了类名。
-
.card--horizontal仅用于改变单张卡片内部结构（如头图左置、文字右对齐），不影响父容器排布 -
.card--stacked用于强调垂直堆叠语义，常配合 flex-direction: column 使用 - 多卡片排列（三列/两列/单列）由父容器控制，例如
.card-grid块自身响应式，而非每张卡片加修饰符
父容器如何用 BEM + Grid/Flex 控制卡片排列
卡片排列不是卡片自己的事，而是父容器的职责。.card-grid 是独立 Block，它内部的 .card-grid__item 才对应单张卡片。这样既避免嵌套过深，又让布局逻辑可测试、可复用。
性能与兼容性影响：Grid 在现代浏览器中更可控，但若需支持 Safari 15.6 以下版本，display: flex + flex-wrap: wrap 更稳妥；注意 gap 属性在旧版 Flex 中不被支持，需用 margin 模拟。
-
.card-grid设display: grid，用grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))实现流式列数 - 不要在
.card-grid里写.card-grid > .card这类后代选择器——应使用.card-grid__item显式绑定 - 移动端堆叠时，直接在
@media (max-width: 768px)中设.card-grid { grid-template-columns: 1fr; }，不改 HTML
为什么不能用 .card--col-3 这类修饰符控制列数
因为列数是容器级决策，不是卡片自身的状态。给每张卡片加 .card--col-3，等于让 12 张卡片各自“宣称自己属于三列表格”，但实际它们可能被塞进一个两列容器里——语义和渲染完全脱节。
容易踩的坑：有人用 JS 动态加类来适配列数，结果滚动时频繁重排、CLS（累积布局偏移）飙升；还有人把列数逻辑写进 :has()，导致 Safari 不兼容且性能差。
-
.card只定义自身样式边界（padding、border、阴影等），不感知外部排列 - 列数变化时，只改父容器类名或 CSS 变量，例如
--card-grid-cols: 2 - 如果必须用修饰符表达布局意图，选
.card-grid--fluid或.card-grid--fixed，而不是数字枚举
卡片内嵌网格（如信息栏+操作区）怎么命名才不越界
卡片内部如果有复杂区域划分（比如右侧固定操作栏 + 左侧自适应内容），这不是 .card__body 的子元素能解决的，而是新 Block：.card-info-panel 或 .card-action-bar。BEM 不允许三层嵌套，所以 .card__body__info-grid 是错的。
实操关键点：每个具备独立功能、可复用、有明确边界的 UI 单元，都该是顶层 Block。哪怕它只出现在卡片里，也不降低它的组件地位。
-
.card__body里放<div class="card-info-panel"></div>，而不是<div class="card__body-info"></div> -
.card-info-panel内部用.card-info-panel__title、.card-info-panel__value等标准元素命名 - 避免用
.card__body > .info-grid这种选择器——它把布局逻辑藏在 CSS 里，HTML 结构一变就失效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
