Grid容器必须作为独立Block命名，如dashboard-grid而非泛化名；子元素需带完整BEM路径，如dashboard-grid__header；内层复杂网格应升格为独立Block；响应式仅改grid-template-areas，类名语义不变。
Grid容器必须作为独立 Block 命名，不能叫 grid 或 layout
网格容器不是“技术工具”，而是承载具体业务职责的模块。比如仪表盘主布局，起名 dashboard-grid 比 grid-container 或 page-layout 更准确——前者能被搜索定位、复用判断、语义理解；后者要么泛化污染全局，要么无法体现它到底在管什么。
常见错误是给外层容器加 class="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-area: header 把内容“扔进”区域，就认为样式归属自动转移了。BEM 要求语义锚点落在 HTML 类名上，否则调试时搜不到源头，改样式时不敢动。
比如 header 区域的内容，必须写成 <header class="dashboard-grid__header"></header>，而不是 <div class="header">。这样所有相关样式、模板片段、JS 查询都能通过 dashboard-grid__ 前缀统一拉出。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.dashboard-grid__header、.dashboard-grid__sidebar、.dashboard-grid__main-content - ❌ 错误：
.header、.sidebar（孤立类名，无块归属）或.dashboard-grid__header__title（三层嵌套，违反 BEM 元素不嵌套原则） - ⚠️ 注意：禁止用
grid-column: 1 / -1强行撑满区域——这会破坏__header的视觉边界，后续加border或box-shadow时容易变形
内层复杂网格必须升格为独立 Block，不能作为父 Block 的子 Element
如果 .dashboard-grid__main-content 里还要放一个卡片列表，且该列表本身有响应式重排、加载态、空状态等逻辑，它就不再是“主内容区的一个部分”，而是一个具备独立职责的模块。
BEM 明确禁止 .dashboard-grid__main-content__card-grid 这种写法。三层嵌套既难读又难维护，也违背“一个块一个职责”的前提。
- ✅ 正确：把内层也视为 Block：
.card-grid，它内部的元素用.card-grid__item、.card-grid__loading等命名 - ✅ HTML 中只需在
.dashboard-grid__main-content下放一个<div class="card-grid">即可 - ❌ 错误：
.dashboard-grid__main-content .card-grid这种后代选择器写法——又引入隐式依赖，违背 BEM “样式只属于一个块” 的原则
响应式重排时只改 grid-template-areas，类名语义不变
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 挪到 main 下面，不意味着要改成 .dashboard-grid__main-sidebar。真正该动的是 CSS 中的 grid-template-areas 字符串。
- 保持类名不变：
.dashboard-grid__sidebar仍是 sidebar，只是媒体查询里改它的grid-area值 - 如果 sidebar 在移动端变成抽屉，可用修饰符：
.dashboard-grid__sidebar--drawer，而不是重命名 - 不要用
.dashboard-grid__sidebar-mobile这类带设备词的类名——设备不是语义，状态才是
最容易被忽略的一点是：很多人在父块 CSS 里偷偷写后代选择器去控制内层网格，比如 .dashboard-grid__main-content .card-grid，以为省事，结果破坏了 Block 的独立性，后续迁移或复用时根本没法拆。
