直接写CSS布局易失控因布局规则与组件样式混杂，导致修改局部影响全局；BEM+布局原子类（如.l-stack、.l-grid-2）将布局行为抽离为功能型类，组件样式禁用布局属性，响应式在布局类内统一处理，实现职责分离。
为什么直接写 CSS 布局容易失控
因为布局规则和组件样式混在一起，margin、display: grid、flex-direction 这些属性散落在各个选择器里，改一个按钮的间距可能意外撑开整个侧边栏。更麻烦的是，不同页面复用同一块结构时，靠 .page-home .sidebar 这种嵌套选择器强行覆盖，越叠越多，最终出现 !important 泛滥或“删一行，三处崩”。
用 BEM + 布局原子类控制结构层
把「布局行为」从组件样式里剥出来，单独定义一套只管位置关系的类名。不写语义化名字（比如 .header-nav），只写功能型名字（比如 .l-stack、.l-grid-3）。
-
.l-stack：垂直等距堆叠子元素（用flex或grid实现，不依赖内容） -
.l-grid-2：两列等宽网格，子元素自动填满（grid-template-columns: repeat(2, 1fr)） -
.l-flow：水平流式排列，溢出换行（flex-wrap: wrap） - 所有布局类加前缀
l-，一眼区分「layout」和「component」类
.l-stack {
display: flex;
flex-direction: column;
gap: 1rem;
}
.l-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.l-flow {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
组件内部禁止写布局属性
组件样式文件（比如 Button.css 或 Card.css）里，不允许出现 margin、width、display（除 inline-block 等内联修复外）、position。它的职责只是定义「自己长什么样」，不是「自己该放在哪」。
- 如果 Card 需要右边留空，不是在
.card { margin-right: 1rem }，而是父容器加.l-flow - 如果 Button 在表单里需要居中，不在 Button 上写
margin: 0 auto，而是在表单容器上加.l-center - 所有「位置干预」必须发生在父子关系明确的容器层，不能靠兄弟元素互相推挤
响应式布局用媒体查询包裹布局类
别在每个组件里写 @media (max-width: 768px)，而是在布局类内部做断点适配。这样改布局逻辑时，只需动一处。
立即学习“前端免费学习笔记（深入）”；
.l-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 768px) {
.l-grid-3 {
grid-template-columns: 1fr;
}
}
关键点：断点只影响布局结构本身，不侵入组件尺寸；.l-grid-3 在小屏下变成单列，但里面的 .card 样式完全不变——这才是可维护的源头。
真正难的不是写多少类，而是坚持让「布局」和「外观」住在不同文件夹、不同命名空间、不同心智模型里。一旦开始用 l- 类去组织容器，再回头看以前靠 div:nth-child(3n+1) 调整样式的写法，就会明白问题不在 CSS 能力，而在责任有没有划清。
