Grid容器必须是独立Block，命名应体现业务语义而非技术实现，如dashboard-grid；子区域须用完整BEM路径（如dashboard-grid__sidebar）；内层复杂模块需升格为独立Block（如card-grid）；响应式仅调整grid-template-areas，不改类名。
Grid容器必须是独立Block，不能叫grid-container
Grid只是实现手段，不是语义。用grid-container这类名字等于把技术细节塞进HTML，换用Flex或重构时类名就失效，还掩盖了它到底承载什么业务模块。比如仪表盘主布局，应该命名为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时容易变形
内层Grid必须升格为独立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>。
关键点在于：
- 禁止写
.dashboard-grid__main-content__card-grid这种三层嵌套——BEM不允许__跨层穿透 -
.dashboard-grid__main-content只负责布局占位，不承担任何业务样式 - 避免在父块CSS中写
.dashboard-grid__main-content .card-grid——这引入隐式依赖，违背“样式只属于一个块”的原则
响应式只改grid-template-areas，不重命名类
BEM类名一旦确定就不该随断点变化。响应式调整应集中在CSS的grid-template-areas声明上，而不是给元素加--mobile修饰符或换类名。
比如桌面端写grid-template-areas: "header header" "sidebar main"，移动端改成"header" "main" "sidebar"即可。所有区域仍使用.dashboard-grid__header、.dashboard-grid__sidebar等原始类名。
这样做能守住两个底线：
- HTML结构稳定，JS逻辑不因断点切换而重绑事件或重查DOM
- 类名搜索结果始终一致，不会出现
dashboard-grid__sidebar--mobile这种割裂的维护路径 - 如果真要控制某区域是否显示，用
.dashboard-grid__sidebar--hidden这类Modifier更安全，且可被JS精确开关
最易被忽略的是：Grid容器的gap、padding、max-width这些值，必须由Block自身控制，不能指望父容器或工具类注入。否则当.card-grid被挪到弹窗或侧边栏里复用时，布局就立刻错位——BEM的约束力，本质上是对CSS作用域边界的物理锁定。
