栅格容器必须升格为独立 Block，不能当工具类用：.dashboard-grid 等是语义完整的 Block，需绑定明确职责；grid-area 名须与子 Block 类名严格一致；嵌套网格须独立升格；响应式仅调整 grid-template-areas，不改 BEM 类名。
栅格容器必须升格为独立 Block，不能当工具类用
直接结论：.dashboard-grid 这种类名不是“加个 grid 就完事”的工具类，它本身就是语义完整的 Block。很多人把 .grid 或 .columns 当成通用样式复用，结果改一个 gap 就让表单页和仪表盘同时错位——因为它们共享同一组 CSS 规则，却承载不同业务逻辑。
正确做法是每个栅格容器绑定明确职责：
-
.dashboard-grid只定义display: grid、grid-template-areas和轨道尺寸（grid-template-rows/columns），不写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"> -
.dashboard__card-list是完整路径，不是.card-list；BEM 要求语义归属可追溯，搜dashboard__就能拉出全部相关样式和模板片段 - 禁止用
grid-column: 1 / -1强行撑满区域——这会破坏块的视觉边界，后续加border、box-shadow或padding时容易变形
嵌套网格必须升格为独立 Block，禁止三层 BEM 命名
内层网格（比如卡片列表）不是 .dashboard__main-content 的子元素，而是独立功能单元。BEM 不允许出现 .dashboard__main-content__card-grid 这种三层嵌套——它既违反命名约束，又让样式依赖变得隐式且不可控。
正确结构：
- 外层：
<div class="dashboard-grid"></div> - 占位区：
<div class="dashboard__main-content"></div>（只负责布局占位） - 插入块：
<div class="card-grid"></div>（独立 Block，内部用.card-grid__item、.card-grid__loading） - 绝对不要在父 Block 里写
.dashboard__main-content .card-grid——这引入了隐式依赖，违背 “样式只属于一个 Block” 原则
响应式重排只动 grid-template-areas，不动 BEM 类名
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 从右侧挪到主内容下方，.dashboard__sidebar 依然是 .dashboard__sidebar，不需要改成 .dashboard__main-sidebar 或删掉 grid-area: sidebar。
真正该改的只有 CSS 中的 grid-template-areas 字符串：
- 桌面端：
"header header" "sidebar main" - 移动端：
"header" "main" "sidebar" - 如果
sidebar在移动端变成抽屉，用修饰符：.dashboard__sidebar--drawer，而不是加设备词类名（如.dashboard__sidebar-mobile）
设备不是语义，状态才是。类名不变，意味着模板复用、样式隔离、搜索定位都保持稳定——但很多人一做响应式就忍不住重命名，结果后期改一个断点，全站 __ 路径都要同步更新。
