Grid容器必须是独立Block且类名语义化，子元素须带完整BEM路径，grid-area值须与类名严格一致，内层网格应升格为独立Block，布局逻辑由父级Grid规则统一管控。
Grid容器本身就是一个独立 Block，子元素必须带完整 BEM 路径，不能靠 DOM 层级或后代选择器“猜”归属。
Grid 容器必须是一个 Block，且类名表达语义而非技术
外层网格布局（如仪表盘、首页主区）应直接命名为 .dashboard 或 .homepage-layout，而不是 .grid-container 或 .layout-grid。后者暴露实现细节，换用 Flex 模拟时就得全量改类名。
-
.dashboard表明这是一个承载“仪表盘业务意图”的独立单元，后续可复用、可测试、可单独打包 - 禁止在 HTML 中只写
<header class="header"></header>这类孤立类名——它脱离 Block，BEM 作用域即失效 - 所有直接子元素必须显式携带块名：
.dashboard__header、.dashboard__sidebar、.dashboard__main-content
grid-area 值必须与类名严格一致
CSS 中的 grid-area 不是“别名”，而是视觉区域的语义锚点。它和类名不一致，等于把布局逻辑拆成两份，调试时搜不到对应样式，JS 查询也拿不到上下文。
- 若 HTML 写
<div class="dashboard__header">，CSS 就必须写 <code>grid-area: header，不能写grid-area: top-bar或grid-area: dashboard-header - 常见错误：
grid-area: email-field对应<div class="login-form__email"> —— 类名少一个 <code>field，就断开了语义链 - 响应式重排时，只改
grid-template-areas字符串，不改类名。移动端把 sidebar 下移，仍用.dashboard__sidebar，只是 CSS 里让它出现在"footer"行 - 禁止：
.dashboard__main-content__card-grid—— 三层嵌套破坏语义边界，无法回答“这个东西能不能脱离 dashboard 单独用” - 正确：
.card-grid，它内部用.card-grid__item、.card-grid__loading，HTML 中直接插入<div class="card-grid"> <li> <code>.dashboard__main-content只承担布局占位职责（定义 grid-area、min-height），不写颜色、字体、圆角等组件级样式 - 错误做法：在
.dashboard__header上加grid-column: 1 / -1—— 它会破坏盒模型完整性，后续加border或padding易变形 - 正确做法：在
.dashboard的grid-template-areas中写"header header"，再配grid-template-columns: 1fr 3fr，让 header 区域天然占据首行全部列轨道 - 元素类名只负责“我是谁”，不负责“我多宽”——尺寸和位置交给父 Block 的 Grid 规则统一管控
内层网格必须升格为独立 Block，禁用三层嵌套
仪表盘里的卡片列表、用户动态流、商品瀑布流，都不是 .dashboard__main-content 的子元素，而是具备独立状态、复用逻辑、可单独测试的新 Block。
立即学习“前端免费学习笔记（深入）”；
布局撑满由 Grid 轨道控制，非元素自身伸缩
让 .dashboard__header 横跨整行，不是靠 width: 100% 或 grid-column: 1 / -1 强行拉伸，而是通过 grid-template-areas 和轨道定义自然实现。
最容易被忽略的是：BEM 在 Grid 场景下不是“怎么起名”，而是“谁该负责哪段逻辑”。一旦把布局规则塞进组件内部（比如让 .card 自己写 grid-column: span 2），块的单一职责就崩了——它既管内容，又管排列，改起来牵一发而动全身。
