grid容器必须是承担明确业务职责的独立block，命名需用业务块名如dashboard-grid，禁止泛化或实现细节类名，子元素须带完整bem路径，内层复杂结构应升格为独立block，响应式仅改grid-template-areas不改类名。
Grid 容器不是“能用就行”的技术容器，而是必须承担明确业务职责的独立 Block；否则 BEM 就退化成徒增长度的字符串游戏。
Grid 容器必须用业务块名，不能叫 grid 或 container
直接写 class="grid" 或 class="container" 看似省事，实则埋下三类隐患：搜索时无法定位具体模块、样式易被其他同名容器覆盖、重构换 Flex 时类名全失效。
- ✅ 正确命名：
dashboard-grid、editor-container、form-layout——名字能回答“它管什么” - ❌ 错误实践：
grid-container暴露实现细节；page-layout过于泛化，两个页面共用会导致改 sidebar 宽度时意外崩掉另一个 - ⚠️ 注意：
.dashboard-grid的 CSS 规则里只写display: grid、grid-template-areas和轨道定义，不掺杂padding、background等业务样式
每个 grid-area 对应的子元素必须带完整 BEM 路径
仅靠 grid-area: header 把内容“扔进”区域，而 HTML 中写 <header class="header"></header>，等于放弃 BEM 的语义锚点——调试时搜不到源头，JS 查询漏上下文，样式复用无从谈起。
- ✅ 正确写法：
<header class="dashboard-grid__header"></header>、<aside class="dashboard-grid__sidebar"></aside> - ❌ 错误写法：
<div class="header">（孤立类名）、<code><div class="dashboard-grid__header__title">（三层嵌套，BEM 明确禁止） <li>⚠️ 注意：禁止用 <code>grid-column: 1 / -1强行撑满区域——这会破坏__header的视觉边界，后续加border或box-shadow时容易错位变形 - ✅ 正确做法：定义独立 Block
card-grid，内部用card-grid__item、card-grid__loading - ❌ 错误做法：
dashboard-grid__main-content__card-grid（三层嵌套违反 BEM 基本前提） - ⚠️ 注意：禁止在
dashboard-grid.css中写.dashboard-grid__main-content .card-grid——这引入隐式依赖，违背“样式只属于一个 Block”的原则 - ✅ 正确方式：保持
dashboard-grid__sidebar不变，在媒体查询中修改其grid-area值或整个grid-template-areas字符串 - ❌ 错误方式：
dashboard-grid__sidebar--mobile（设备词非语义）、dashboard-grid__sidebar--drawer（若 drawer 是行为态，需确保 JS 可控且 CSS 有对应规则） - ⚠️ 注意：修饰符如
--narrow或--compact应表达密度或布局意图，而非断点本身；所有断点逻辑收口在@media块内，不污染类名
内层复杂网格必须升格为独立 Block，不能嵌套在父 Block 下
当 dashboard-grid__main-content 里要放一个带加载态、空状态、响应式重排逻辑的卡片列表时，它已不是“主内容区的一部分”，而是具备独立功能、可复用、有自身状态的模块。
响应式只改 grid-template-areas，不重命名类
BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 挪到 main 下方，不意味着要改成 dashboard-grid__main-sidebar；抽屉态也不该叫 --mobile。
最常被忽略的一点是：BEM 的价值不在“命名长”，而在让每个类名都成为可搜索、可隔离、可预测的语义锚点——一旦你开始手拼 className={`dashboard-grid__${area}--${state}`}，就该立刻停下来封装 cn() 工具函数，否则 CI 构建时连破折号漏写都会导致样式丢失。
