Grid容器必须体现业务语义而非技术实现，如dashboard-grid、form-layout；子元素须用完整BEM路径命名，内层复杂结构应升格为独立Block，响应式仅调整grid-template-areas。
Grid容器必须是独立 Block，不能叫 grid-container 或 layout —— 这类名字暴露实现细节，换用 Flex 或重构时就失效，还掩盖了它实际承载的业务职责。
Grid 容器必须体现业务语义，而非技术手段
比如仪表盘主结构应命名为 dashboard-grid，表单区域用 form-layout，卡片列表区用 card-grid。这些名字在 HTML 中直接体现为 <div class="dashboard-grid">，CSS 里只写 display: grid、grid-template-areas 和轨道定义，不掺杂背景色、padding、字体等业务样式。
常见错误包括：
- 全局复用
.grid工具类——不同模块的gap、justify-content、断点极易互相覆盖 - 给纯视觉分组（如
.section-2）强行升格为 Block——它不具备复用性与独立状态，不该有 BEM 块级作用域 - 在
.dashboard-grid规则里写.dashboard-grid .card-list这种后代选择器——等于放弃 BEM 的作用域隔离
每个 grid-area 对应的子元素必须带完整 BEM 路径
不能只靠 grid-area: sidebar 把内容“扔进”区域，就认为样式归属自动转移了。HTML 中该区域的直接子元素必须显式携带 Block 前缀，例如：<div class="dashboard-grid__sidebar">，对应 CSS 写 .dashboard-grid__sidebar。
立即学习“前端免费学习笔记（深入）”；
这样做的实际好处很直接：
- 搜索
dashboard-grid__就能拉出全部相关样式和模板片段 - 调试时样式面板里的类名自带上下文，不会和
.nav__sidebar或.modal__sidebar混淆 - 禁止写
<div class="sidebar">—— 孤立类名没绑定块，全局污染风险极高 - 禁止用
grid-column: 1 / -1强行撑满区域——这会破坏.dashboard-grid__sidebar的视觉边界，后续加边框、阴影或 padding 时容易变形
内层复杂网格必须升格为独立 Block，不能用 __ 嵌套
如果 .dashboard-grid__main-content 里放一个卡片列表，这个列表本身不是外层 Grid 的子元素，而是一个具备独立功能、可复用、有自己状态（加载中/空状态/错误态）的模块。它应该有自己的 Block 名：.card-grid，内部元素用 .card-grid__item、.card-grid__loading 等命名。
HTML 结构就是：<div class="dashboard-grid__main-content"><div class="card-grid"></div></div>。
关键点在于：
- 这种三层嵌套——BEM 不允许
- 避免在父块 CSS 中写
.dashboard-grid__main-content .card-grid—— 这引入隐式依赖，违背模块自治原则 - 响应式调整只改
grid-template-areas，不改类名；类名语义始终稳定
最易被忽略的是：BEM 的作用域锚点必须落在 HTML 类名上，而不是 CSS 的 grid-area 值里。一旦脱离类名绑定，搜索、调试、复用全都会断链。
