Grid容器必须是承担明确业务职责的独立Block，命名需用业务块名如dashboard-grid，子元素须带完整BEM路径，内层复杂结构应升格为独立Block，响应式仅改grid-template-areas而非类名。
Grid 容器不是“能用就行”的技术容器，而是必须承担明确业务职责的独立 Block；否则 BEM 就退化成徒增长度的字符串游戏。
Grid 容器必须用业务块名，不能叫 grid 或 container
直接写 class="grid" 或 class="container" 看似省事，实则埋下三类隐患：搜索时无法定位具体模块、样式易被其他同名容器覆盖、重构换 Flex 时类名全失效。
- ✅ 正确命名：
dashboard-grid、editor-container、form-layout——名字能回答“它管什么” - ❌ 错误实践：
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 下面，不意味着要改成 dashboard-grid__main-sidebar；真正该动的是 CSS 中的 grid-template-areas 字符串。
- ✅ 正确操作：HTML 类名保持
dashboard-grid__sidebar不变，媒体查询中只改其grid-area值或整个grid-template-areas - ❌ 错误操作：
dashboard-grid__sidebar--mobile或dashboard-grid__sidebar@md——设备不是语义，状态才是 -
⚠️ 注意：修饰符如
--narrow或--stacked可用于表达布局变体，但必须由@media统一控制生效条件，不能和断点名耦合
最常被忽略的一点是：BEM 的作用域隔离完全依赖类名显式绑定，而不是靠 CSS 选择器层级或 grid-area 隐式映射——一旦 HTML 中出现孤立类名，整套机制就从根上松动了。
