grid-area 值必须与子项完整 BEM 类名的双下划线后缀严格一致，如 .dashboard__sidebar 对应 grid-area: sidebar；类名须带块前缀，禁用后代选择器、三层嵌套及设备相关修饰符，确保语义稳定与样式解耦。
grid-area 值必须和子项类名完全一致
Grid 布局中，grid-area 不是随便起的别名，它必须和对应子元素的 BEM 类名后缀严格相同。比如 CSS 里写了 .dashboard__sidebar { grid-area: sidebar; }，那 HTML 中的子元素就必须是 <div class="dashboard__sidebar">，不能是 <div class="sidebar"> 或 <div class="dashboard-sidebar">。
常见错误是把 grid-area 当成“内部变量”来用，结果 HTML 和 CSS 脱节：搜 dashboard__sidebar 找不到样式，查 grid-area: sidebar 又定位不到 DOM——调试时得两边来回切，浪费大量时间。
- 类名必须完整带块前缀：
dashboard__header，不是header -
grid-area值只取双下划线后的部分：header、sidebar、main-content - 禁止用
grid-column: 1 / -1强行撑满区域——这会绕过 BEM 的语义锚点，后续加border或box-shadow时边界错乱
嵌套网格子项不能写成三层 BEM 类名
如果 .dashboard__main-content 里面还要用 Grid 排列卡片列表，别写成 .dashboard__main-content__card-grid。BEM 明确禁止三层嵌套，这种写法既违反命名规则，又让样式逻辑隐式耦合。
正确做法是把内层网格升格为独立 Block：.card-grid。它和 .dashboard 是平级关系，不是从属关系。
立即学习“前端免费学习笔记（深入）”；
- 外层只负责占位：
<div class="dashboard__main-content"><div class="card-grid"></div></div> - 内层自成体系：
.card-grid__item、.card-grid__loading - 禁止在父 Block CSS 里写
.dashboard__main-content .card-grid——这等于引入隐式依赖，违背“样式只属于一个 Block”原则
响应式重排时 grid-template-areas 可变，BEM 类名不能变
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 从侧边挪到主内容下方，.dashboard__sidebar 这个类名依然成立，不该改成 .dashboard__sidebar-mobile 或 .dashboard__sidebar-bottom。
真正该动的是 CSS 里的 grid-template-areas 字符串，比如从：
.dashboard {
grid-template-areas:
"header header"
"sidebar main";
}
改成：
.dashboard {
grid-template-areas:
"header"
"main"
"sidebar";
}
- 类名不变，语义意图依然清晰：搜
dashboard__sidebar就能拉出所有相关样式和模板片段 - 若 sidebar 在移动端变为抽屉，可用修饰符：
.dashboard__sidebar--drawer - 禁用带设备词的类名（如
--mobile、--tablet），设备不是语义，状态才是
子项类名必须落到实际 DOM 元素上，不能靠后代选择器补救
常见翻车操作：HTML 中只给容器加 .dashboard，子元素却只写 .header、.sidebar 这种孤立类名。这些类没绑定块，等于放弃 BEM 的作用域隔离能力。
更危险的是在 CSS 里用后代选择器“打补丁”，比如写 .dashboard .header——这会让样式强依赖 DOM 层级，一旦中间插入 wrapper 或 Fragment，整个布局就失效。
- 每个可感知的区域都必须有带块名的类，且必须落到实际元素上
- 禁止
.dashboard__header下再嵌套.dashboard__header__title——标题应拆为独立块：.header-title - JS 动态拼类名时，务必确保字符串拼接不漏
__或空格，CI 构建环境对大小写和连字符极其敏感
