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 只会捞出一堆无关紧要的通用容器。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ✅ 按职责命名：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"></header>，而不是 <div class="header"> —— 后者是孤立类名，全局污染风险极高。 <ul> <li>✅ 正确写法：<code>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，不改类名；类名语义始终稳定，这是最容易被忽略的底层约束