grid-template-areas区域名须全小写、无连字符、不加引号，如header、sidebar；禁止main-content或"footer"等错误写法；Grid容器应按职责命名（如dashboard-grid），子元素需带完整BEM路径，内层复杂布局须升格为独立Block。
grid-template-areas 的区域名必须全小写、无连字符、不加引号
区域名不是普通类名，而是 CSS 语法级标识符，浏览器按字面精确匹配。写成 main-content 或 "header" 都会失效——前者含连字符不合法，后者加引号可能被解析为字符串而非标识符。
常见错误现象：布局“看起来没生效”，控制台却无报错，实际是整条 grid-template-areas 声明被静默忽略，回退到流式布局。
- ✅ 正确命名：
header、sidebar、main、heroSection（小驼峰也合法，但需团队统一） - ❌ 错误命名：
main-content（含短横线）、"footer"（多余引号）、Footer（大小写不一致） - 点号
.表示空白单元格，不是类名，不参与匹配，也不用加引号
Grid 容器必须是业务语义块，不能叫 grid-container
叫 grid-container 等于把实现细节写进 HTML，换用 Flex 或重构时类名就失效，还掩盖了它实际承载的模块职责。
真实场景中，你搜 dashboard-grid 能立刻定位仪表盘主结构；搜 form-layout 能拉出所有表单相关样式和模板片段；而搜 grid-container 只会捞出一堆无关紧要的通用容器。
立即学习“前端免费学习笔记（深入）”；
- ✅ 按职责命名：
dashboard-grid、product-card-list、editor-layout - ❌ 技术导向命名：
grid-container、layout、flex-wrapper -
.dashboard-grid的 CSS 规则里只写display: grid、grid-template-areas和轨道定义，不掺杂背景、padding、字体等业务样式
每个 grid-area 对应的子元素必须带完整 BEM 路径
仅靠 grid-area: header 把内容“扔进”区域，不代表样式归属自动转移。BEM 的语义锚点必须落在 HTML 类名上，否则调试时搜不到源头，改样式时不敢动。
例如，header 区域的内容必须是 <header class="dashboard-grid__header">，而不是 <div class="header"> —— 后者是孤立类名，全局污染风险极高。
- ✅ 正确写法：
dashboard-grid__header、dashboard-grid__sidebar、dashboard-grid__main-content - ❌ 错误写法：
header（无上下文）、dashboard-grid__header__title（三层嵌套，违反 BEM 元素不嵌套原则） - 禁止用
grid-column: 1 / -1强行撑满区域——这会破坏dashboard-grid__header的视觉边界，后续加border或box-shadow时容易变形
内层复杂 Grid 必须升格为独立 Block，不能嵌套 __
如果 dashboard-grid__main-content 里还要放一个卡片列表，且该列表本身有响应式重排、加载态、空状态等逻辑，它就不再是“主内容区的一个部分”，而是一个具备独立职责的模块。
BEM 明确禁止 dashboard-grid__main-content__card-grid 这种写法。三层嵌套既难读又难维护，也违背“一个块一个职责”的前提。
- ✅ 正确做法：内层也视为独立 Block，命名为
card-grid，HTML 结构为<div class="dashboard-grid__main-content"><div class="card-grid"></div></div> - ❌ 错误做法：在父块 CSS 中写
.dashboard-grid__main-content .card-grid—— 这引入隐式依赖，违背 BEM “样式只属于一个块” 的原则 - 响应式只调整
grid-template-areas，不改类名；类名语义始终稳定，这是最容易被忽略的底层约束
