bem栅格系统必须按block职责隔离：.dashboard-grid、.form-layout等各自声明布局逻辑，grid-area名须与子block类名严格一致，嵌套网格升格为独立block，响应式仅修改grid-template-areas而非类名。
直接结论：BEM 下的栅格系统不能当工具类用，.grid-3 这种泛化类名会破坏语义隔离，导致改一个 gap 就让表单页和仪表盘同时错位。
栅格容器必须是 Block，不是工具类
很多人把 .grid 或 .columns 当成通用样式复用，结果改个 gap 就连锁崩坏——因为不同业务区域（如 .form-layout 和 .dashboard-grid）共享同一组 CSS 规则，却承载完全不同的布局意图。
正确做法是每个栅格容器绑定明确职责：
-
.dashboard-grid只声明display: grid、grid-template-areas和轨道尺寸，不写padding、background等业务样式 -
.form-layout专管表单对齐、row-gap和label/input垂直居中逻辑 -
.modal-grid控制弹窗内内容紧凑排布，断点响应也只在此 Block 内闭环
grid-area 名必须与子 Block 类名严格一致
常见错误是 HTML 里写 grid-area: sidebar，CSS 却用 .dashboard-grid .sidebar 去控制宽度或背景色——这等于把样式逻辑拆到两个地方：HTML 属性 + CSS 选择器，调试时根本找不到源头。
实操要点：
- 每个
grid-area的值必须和对应子元素的 BEM 类名完全相同，例如grid-area: card-list→ 子容器必须是<div class="card-list"> <li> <code>.dashboard__card-list是完整路径，不是.card-list；BEM 要求语义归属可追溯，搜dashboard__就能拉出全部相关样式和模板片段 - 禁止用
grid-column: 1 / -1强行撑满区域——这会破坏块的视觉边界，后续加border、box-shadow或padding时容易变形 - 把内层也视为 Block：
.card-grid，它内部的元素用.card-grid__item、.card-grid__loading等命名 - HTML 中只需在
.dashboard__main-content下放一个<div class="card-grid"> 即可 <li> <code>.dashboard__main-content只负责布局占位，不承担业务样式；避免在父块 CSS 中写.dashboard__main-content .card-grid——这又引入了隐式依赖 - 桌面端：
grid-template-areas: "header header" "sidebar main" - 移动端：
grid-template-areas: "header" "main" "sidebar" - 如果 sidebar 在移动端变成抽屉，可用修饰符：
.dashboard__sidebar--drawer，而不是重命名 - 禁用
.dashboard__sidebar-mobile这类带设备词的类名——设备不是语义，状态才是
嵌套网格必须升格为独立 Block
内层网格（比如卡片列表）不是 .dashboard__main-content 的子元素，而是独立功能单元。BEM 不允许出现 .dashboard__main-content__card-grid 这种三层嵌套——它既违反命名约束，又让样式依赖变得隐式且不可控。
正确做法：
响应式只改 grid-template-areas，不重命名类
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 挪到 main 下面，不意味着要改成 .dashboard__main-sidebar。
保持类名不变：.dashboard__sidebar 仍是 sidebar，只是媒体查询里改它的 grid-area 值：
真正该动的是 CSS 中的 grid-template-areas 字符串，类名不动，结构意图依然清晰。最容易被忽略的一点是：所有响应式规则必须绑定到明确的 BEM 类，且只允许单类名触发；@media 块内不能出现组合选择器，否则搜索、校验、回归测试全失效。
