bem 中外距应由容器（如 .list）统一控制，而非在 .list__item 内设置 margin；正确做法是用 gap 或父级单侧 margin 控制间隔，确保复用性、响应式与布局稳定性。
直接用 .list__item 加 margin 是错的起点——BEM 不反对 margin，但反对把外距逻辑塞进元素内部，导致复用时间距失控、父子塌陷、响应式难维护。
为什么不能在 .list__item 里写 margin-top / margin-bottom
因为 .list__item 必须是自包含单元：复制到另一个页面、换父容器、嵌套进卡片里，外观不能变。一旦它自己带 margin-top，就和上一个兄弟元素形成塌陷条件；若父容器是 flex 或 grid，又可能被忽略或冲突。
-
.list__item只管自身尺寸、内边距、行高、颜色——这是它的契约 - 外距（即“间隔”）属于布局上下文，该由
.list这个 block 统一控制 - 写
.list__item { margin-bottom: 1rem; }看似省事，实则把布局责任下放，后续加.list--dense就得覆盖所有子项，易漏、难查
正确做法：用 .list 的 gap 或 flex-direction 控制间隔
现代布局中，gap 是最干净的间隔控制方式，天然规避 margin 塌陷，且支持响应式断点直接切换单位。
- 垂直列表：
.list { display: flex; flex-direction: column; gap: 0.75rem; } - 水平列表：
.list { display: flex; gap: 1rem; } - Grid 列表：
.list { display: grid; row-gap: 0.5rem; } - 兼容老浏览器时，退回到单侧 margin：
.list > .list__item:not(:last-child) { margin-bottom: 0.75rem; }，但必须确保.list自身不设margin-top，否则父子塌陷
遇到需要不同密度的列表怎么办
别改 .list__item 的 margin，而是通过修饰符切换 .list 的布局参数——这样所有子项自动适配，无遗漏风险。
.list--compact { gap: 0.25rem; }.list--spacious { gap: 1.5rem; }- 如果用 fallback margin 方案：
.list--compact > .list__item:not(:last-child) { margin-bottom: 0.25rem; } - 禁止写
.list__item--compact—— 间隔不是 item 的状态，是 list 的布局特征
Flex 容器下 .list__item 的 margin 会失效？
不一定失效，但行为不可靠：在 flex 容器中，margin 仍生效，但 gap 优先级更高，且 margin 可能被 align-items 或 justify-content 干扰；更关键的是，一旦你给 .list__item 加了 margin-left，又用 justify-content: space-between，结果就不可预测。
- 原则：flex 容器的子项只接受容器级控制（
gap、justify-content），不写任何margin - 例外仅限图标/徽标等附加内容：
.list__item--with-icon内部用padding-left预留空间，而非靠margin推开文字 - 调试时看到间隔没生效，先检查是否同时写了
gap和margin——后者会被视觉掩盖，但 DOM 中依然存在
真正容易被忽略的是：哪怕用了 gap，也要确保 .list 没有意外触发 BFC（比如 overflow: hidden）导致子项高度计算异常；而所有修饰符的断点，都该落在 .list 上，而不是分散到每个 .list__item 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
