Grid容器应命名体现业务职责（如.dashboard-grid），子元素必须带完整BEM路径，内层网格需升格为独立Block，响应式仅改grid-template-areas而非类名。
Grid 容器必须是一个独立 Block，不能叫 grid-container
Grid 布局本身是实现手段，不是语义。叫 .grid-container 或 .layout-grid 这类名字暴露技术细节，且换用 Flex 后就失效。BEM 要求容器名体现业务职责：比如仪表盘整体布局用 .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 的复用性与独立性要求，不该升格为 Block -
.dashboard-grid的 CSS 规则里不能出现.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 时容易变形 - 如果某区域内容复杂（如 sidebar 里嵌了用户头像、菜单项、状态徽标），应把其中可复用的部分拆成独立 Block（如
.user-avatar、.nav-menu），而不是写.dashboard-grid__sidebar__avatar
内层网格必须升格为独立 Block，不能用 __ 嵌套
仪表盘主内容区里放一个卡片列表，这个列表本身不是 .dashboard-grid 的子元素，而是一个具备独立功能、可复用、有自己状态（加载中/空状态/错误态）的模块。它应该有自己的 Block 名：.card-grid，内部元素用 .card-grid__item、.card-grid__loading 等命名。
HTML 结构就是：<div class="dashboard-grid__main-content"><div class="card-grid"></div></div>。CSS 中 .dashboard-grid__main-content 只负责占位，不控制卡片间距、hover 效果或加载动画。
- 禁止写
.dashboard-grid__main-content__card-grid—— 三层嵌套违反 BEM 层级约束，也破坏样式隔离 - 禁止在父 Block 的 CSS 里写
.dashboard-grid__main-content .card-grid—— 这引入隐式依赖，违背 “样式只属于一个 Block” 原则 - 如果
.card-grid在某些场景下需横向滚动，在另一些场景下需垂直流式排列，应通过 Modifier 控制：.card-grid--scrollable，而非在.dashboard-grid里硬编码布局逻辑
响应式重排时不改类名，只改 grid-template-areas
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 从右侧挪到 main 下方，.dashboard-grid__sidebar 还是 sidebar，只是它在 CSS 里的 grid-area 值变了。真正的变化只发生在媒体查询中：
.dashboard-grid {
grid-template-areas:
"header header"
"sidebar main";
}
@media (max-width: 768px) {
.dashboard-grid {
grid-template-areas:
"header"
"main"
"sidebar";
}
}
- 不要新增
.dashboard-grid__sidebar-mobile—— 设备不是语义，状态才是 - 如果 sidebar 在移动端变成抽屉，可用修饰符：
.dashboard-grid__sidebar--drawer，并配合 JS 切换类名 - 避免用
for/id或属性选择器模拟语义（如[data-area="sidebar"]）——这绕过了 BEM 的显式路径，让搜索和维护成本陡增
