Grid容器必须作为独立Block命名，如.dashboard-grid；子元素需带完整BEM路径如.dashboard-grid__header；内层网格须升格为独立Block；响应式仅改grid-template-areas，类名语义不变。
Grid容器必须作为独立Block命名，不能只叫grid或layout
Grid容器不是“技术工具”，而是承担具体业务职责的模块。比如仪表盘页面的网格结构，起名 .dashboard-grid 比 .grid 或 .page-layout 更准确——前者能被搜索定位、复用判断、语义理解；后两者要么泛化污染全局，要么无法体现它到底在管什么。
常见错误是给外层容器加 .container，再靠 grid-template-areas 隐式分配区域，结果 HTML 里子元素类名只剩孤立的 .header、.sidebar，完全脱离上下文。BEM 的作用域隔离就失效了。
- ✅ 正确：容器写
<div class="dashboard-grid">，CSS 中.dashboard-grid控制display: grid和grid-template-areas - ❌ 错误：容器写
<div class="container">，然后子元素硬塞class="header"——没绑定块，等于放弃 BEM - ⚠️ 注意：
.dashboard-grid的样式规则里，只写容器级布局（如gap、grid-template-columns），不写任何子元素的具体尺寸或颜色
每个grid-area对应子元素必须带完整BEM路径
Grid 容器定义了 grid-template-areas: "header sidebar main"，不代表你可以让子元素只靠 grid-area: header 就完事。BEM 要求语义锚点落在 HTML 类名上，否则调试时搜不到源头，改样式时不敢动。
比如 header 区域的内容，必须写成 <header class="dashboard-grid__header">，而不是 <div class="header">。这样所有相关样式、模板片段、JS 查询都能通过 dashboard-grid__ 前缀统一拉出。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.dashboard-grid__header、.dashboard-grid__sidebar、.dashboard-grid__main - ❌ 错误：
.header、.sidebar（孤立类名，无块归属）或.dashboard-grid__header__title（三层嵌套，违反 BEM 元素不嵌套原则） - ⚠️ 注意：禁止用
grid-column: 1 / -1强行撑满区域——这会破坏__header的视觉边界，后续加border或box-shadow时容易变形
内层网格必须升格为独立Block，不能作为父Block的子Element
如果 .dashboard-grid__main 里还要放一个卡片列表，且该列表本身有响应式重排、加载态、空状态等逻辑，它就不再是“主内容区的一个部分”，而是一个具备独立职责的模块。
BEM 明确禁止 .dashboard-grid__main__card-list 这种写法。三层嵌套既难读又难维护，也违背“一个块一个职责”的前提。
- ✅ 正确：在
.dashboard-grid__main内放<div class="card-list">，其内部用.card-list__item、.card-list__loading - ❌ 错误：
.dashboard-grid__main__card-list或.dashboard-grid__main .card-list（后者引入隐式依赖，样式归属模糊） - ⚠️ 注意：父块 CSS 中禁止出现
.dashboard-grid__main .card-list这类后代选择器——BEM 的样式应只属于一个块，不靠 DOM 层级推导关系
响应式重排时grid-template-areas可变，但BEM类名绝不能变
移动端把 sidebar 区域挪到 main 下面，只是视觉位置变化，不是语义角色变化。.dashboard-grid__sidebar 依然是侧边栏，不是“移动版主内容下方的辅助区”。类名一旦按语义定下，就固定不变。
真正该动的是 CSS 中的 grid-template-areas 声明。不同断点下，可以分别写：
@media (max-width: 768px) {
.dashboard-grid {
grid-template-areas:
"header"
"main"
"sidebar";
}
}- ✅ 正确：类名始终是
.dashboard-grid__sidebar，只改 CSS 里的grid-template-areas - ❌ 错误：为适配移动端新增
.dashboard-grid__sidebar-mobile或改名成.dashboard-grid__main-sidebar - ⚠️ 注意：修饰符（
--mobile）只用于表达状态或变体（如.button--loading），不用于描述布局位置——那是 Grid 自己的事
复杂布局中最容易被忽略的一点：BEM 类名不是为了“写得像规范”，而是为了让人一眼看懂“这个样式归谁管、能不能动、改了会影响哪几处”。 一旦你开始用 grid-area 替代类名来传递语义，那个网格区域就再也无法被全局搜索、无法被组件系统识别、也无法被设计系统收敛。
