栅格容器必须升格为独立 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"> <li> <code>.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 这种三层嵌套——它既违反命名约束，又让样式依赖变得隐式且不可控。


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

正确结构：

• 外层： <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）

设备不是语义，状态才是。类名不变，意味着模板复用、样式隔离、搜索定位都保持稳定——但很多人一做响应式就忍不住重命名，结果后期改一个断点，全站 __ 路径都要同步更新。