Grid容器必须用业务块名（如dashboard-grid），禁止泛化命名；子元素需带完整BEM路径（如dashboard-grid__header）；内层复杂网格须升格为独立Block；响应式只改grid-template-areas，不改类名。
Grid容器不是“能用就行”的技术容器，而是必须承担明确业务职责的独立 Block；否则 BEM 就退化成徒增长度的字符串游戏。
Grid 容器必须用业务块名，不能叫 grid 或 container
直接写 class="grid" 或 class="container" 看似省事，实则埋下三类隐患：搜索时无法定位具体模块、样式易被其他同名容器覆盖、重构换 Flex 时类名全失效。
- ✅ 正确命名：
dashboard-grid、editor-container、login-form——名字能回答“它管什么” - ❌ 错误实践：
grid-container暴露实现细节；page-layout过于泛化，两个页面共用会导致改sidebar宽度时意外崩掉另一个 -
注意：
.dashboard-grid的 CSS 规则里只写display: grid、grid-template-areas和轨道定义，不掺杂padding、background等业务样式
每个 grid-area 对应的子元素必须带完整 BEM 路径
仅靠 grid-area: header 把内容“扔进”区域，而 HTML 中写 <header class="header">，等于放弃 BEM 的语义锚点——调试时搜不到源头，JS 查询漏上下文，样式复用无从谈起。
- ✅ 正确写法：
<header class="dashboard-grid__header">、<main class="dashboard-grid__main-content"> - ❌ 错误写法：
<div class="header">（孤立类名）、<div class="dashboard-grid__header__title">（三层嵌套，BEM 明确禁止） -
注意：禁止用
grid-column: 1 / -1强行撑满区域——这会破坏__header的视觉边界，后续加border或box-shadow时容易错位变形
内层复杂网格必须升格为独立 Block，不能嵌套在父 Block 下
当 dashboard-grid__main-content 里要放一个带加载态、空状态、响应式重排逻辑的卡片列表时，它已不是“主内容区的一部分”，而是具备独立功能、可复用、有自身状态的模块。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确做法：定义独立 Block
card-grid，内部用card-grid__item、card-grid__loading - ❌ 错误做法：
dashboard-grid__main-content__card-grid（三层嵌套违反 BEM 基本前提） -
注意：禁止在
dashboard-grid.css中写.dashboard-grid__main-content .card-grid——这引入隐式依赖，违背“样式只属于一个 Block”的原则
响应式只改 grid-template-areas，不重命名类
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 挪到 main 下面，不意味着要改成 dashboa（截断）或 dashboard-grid__main-sidebar。
- ✅ 保持类名不变：
dashboard-grid__sidebar仍是sidebar，只是媒体查询里改它的grid-area值 - ✅ 如需状态变化（如 sidebar 变成抽屉），可用修饰符：
dashboard-grid__sidebar--drawer - ❌ 不要用
dashboard-grid__sidebar-mobile这类带设备词的类名——设备不是语义，状态才是 -
注意：真正该动的是 CSS 中的
grid-template-areas字符串，比如从"header header" "sidebar main"改成"header" "main" "sidebar"
最容易被忽略的是：所有 grid-area 的值必须和对应子元素的 BEM 类名完全一致；否则语义链就断了——HTML 里写 grid-area: email-field，CSS 却查 .login-form__email-field，而 DOM 中却是 <div class="email-field">，这种错位会让调试变成盲人摸象。
