BEM禁止.block写margin，因其语义是可复用功能单元而非布局节点；间距应由父容器通过语义化修饰符（如.layout__area_margin-bottom-m）控制，并绑定CSS变量实现主题适配与统一收口。
为什么BEM禁止.block写margin？这是布局职责错位
因为 .block 的语义是“可复用的功能单元”，不是“页面中某个具体位置的布局节点”。一旦给 .card 加 margin-bottom: 1rem，它就不再是独立组件，而成了“带底部留白的卡片”——这个留白在模态框里会多余，在网格中会破坏对齐，在嵌套时还会触发 margin 塌陷。
真实问题不是“能不能加”，而是“该由谁决定这段距离”。答案永远是：父容器。比如 .page-section__content 或 .form-layout 才该通过修饰符（如 .form-layout__field_after-submit）声明“提交按钮应出现在字段下方，并保留中等间距”。
- 子组件写
margin→ 父级无法覆盖或统一收口 - 多个子组件各自设
margin-top和margin-bottom→ 实际间距不可控，且易塌陷 -
.block带margin→ 无法安全复用到 Flex/Grid 容器中，gap与margin混用行为未定义
不写margin，那间距怎么控制？靠父级修饰符 + CSS变量
所有跨组件间距必须落在父级 block 的修饰符里，且只声明方向和语义，不写死数值。例如：
.layout__area_margin-bottom-m {
margin-bottom: var(--space-m);
}
这个修饰符绑定了设计系统变量，支持暗色模式、缩放、主题切换；命名体现布局意图（_margin-bottom-m），而非数值（_mb-16）或组件名（_card-after-button）。
立即学习“前端免费学习笔记（深入）”；
- 修饰符必须单向：一个类只设一个方向的
margin，避免叠加冲突 - 禁止组合相反修饰符（如
_margin-top-s _margin-bottom-m同时存在），可用stylelint-selector-bem-pattern拦截 - 高频容器（如
.list）提供.list--compact主动重置外距，再由父级按需添加
常见错误：以为“加个u-margin工具类就行”
在 .card__content 上写 u-mt-2 是典型误用。BEM 规范明确要求：u- 工具类只能用于非组件上下文（如 CMS 富文本、遗留模板），绝不能侵入 block__element 内部。
原因很直接：工具类绕过了 BEM 的职责边界。一旦 .card__content_u-mt-2 出现，这个元素就再也无法干净地放进 .modal__body 或 .sidebar__panel —— 它自带“顶部偏移”，破坏了 block 的可移植性。
-
u-mt-2只能用在临时性、非语义化容器上（如<div class="u-mt-2">） <li>组件内所有间距必须由 <code>block修饰符或__element的padding控制 - 若真需动态控制，应通过 JS 修改父级修饰符（如
classList.toggle('layout__area_margin-bottom-l')），而非操作子元素样式 - Flex/Grid 容器内，子组件必须零外距（
margin: 0），间距全由gap驱动 - 若需某一项特殊留空，改用逻辑属性：
margin-inline-end: var(--space-s)，并确保父容器未设gap - 最稳妥的做法：把需要特殊间距的项单独抽成新
block，由其父级用修饰符控制，保持原子性
Flex/Grid 容器里写margin有多危险？
当父容器是 display: flex 或 display: grid，再给子 .block 加 margin-right 或 margin-bottom，等于主动放弃 gap 的可控性。浏览器对 gap 和 margin 共存的处理没有统一规范，尤其在响应式断点切换时，容易出现视觉跳跃或空白错位。
更隐蔽的问题是：你写的 margin-bottom 在垂直 Flex 中可能被忽略，而在 Grid 中又意外生效——这种不一致会让调试成本翻倍。
