Grid容器必须按业务职责命名而非技术实现，如dashboard-grid；每个grid-area对应子元素需带完整BEM路径；内层复杂模块须升格为独立Block；响应式仅调整grid-template-areas，不改类名。
Grid容器必须作为独立Block命名，不能叫grid-container
Grid只是实现手段，不是语义。用grid-container或layout这类名字等于把技术细节塞进HTML，换用Flex或重构时类名就失效，还掩盖了它到底承载什么业务模块。
正确做法是按业务职责起名：dashboard-grid、editor-container、product-card-list。这些名字能被搜索定位、支持复用判断、明确表达模块边界。
- 禁止全局复用
.grid工具类——不同模块的gap、justify-content、断点极易互相覆盖 - 视觉分组区域（如
.section-2）不具备复用性与独立状态，不该升格为Block -
.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">。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
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，内部元素用card-grid__item、card-grid__loading等 - HTML结构就是：
<div class="dashboard-grid__main-content"><div class="card-grid"></div></div> - 禁止在父块CSS中写
.dashboard-grid__main-content .card-grid——这引入隐式依赖，违背BEM“样式只属于一个块”的原则
响应式只改grid-template-areas，不重命名类
BEM类名描述的是语义角色，不是视觉位置。移动端把sidebar挪到main下面，不意味着要改成dashboard-grid__main-sidebar。
保持类名不变：dashboard-grid__sidebar仍是sidebar，只是媒体查询里改它的grid-area值；如果sidebar在移动端变成抽屉，可用修饰符：dashboard-grid__sidebar--drawer。
- 真正该动的是CSS中的
grid-template-areas字符串，比如从"header header" "sidebar main"改成"header" "main" "sidebar" - 不用
dashboard-grid__sidebar-mobile这类带设备词的类名——设备不是语义，状态才是 - 所有
grid-area值必须与HTML中对应元素的BEM类名严格一致，否则布局和样式将脱节
__命名空间里——看起来省事，但很快就会卡在状态管理、样式隔离和组件复用上。BEM不是为了多写几个下划线，而是让每个模块的职责和边界在类名里一目了然。 
