如何使用CSS BEM命名规范管理网格系统样式

网格容器必须用业务块名，如dashboard-grid、editor-container；子元素需带完整BEM路径，如dashboard-grid__header；内层复杂网格应升格为独立Block；响应式只改grid-template-areas，状态用Modifier。

网格容器必须用业务块名，不能叫 grid 或 layout

直接给容器加 class="grid" 或 class="layout" 是最常见也最危险的起点。这类名字既不表达职责，也不支持搜索和复用——你根本没法回答“这个 grid 到底管什么”。
真正该做的是按业务模块命名：dashboard-grid、editor-container、product-card-list。这些名字能被 grep 出来，能被组件库索引到，也能让新成员一眼看懂它在页面里承担什么角色。
别用 .grid 这类工具类全局复用：不同模块的 gap、justify-content、断点逻辑完全不同，硬塞进一个类里迟早互相覆盖。

每个 grid-area 对应的子元素必须带完整 BEM 路径

只靠 CSS 里的 grid-area: header 把内容“扔进”区域，而 HTML 中写 <header class="header">，等于放弃 BEM 的全部意义。调试时搜不到源头，改样式时不敢动，JS 查询也容易漏掉上下文。
正确写法是：<header class="dashboard-grid__header">、<aside class="dashboard-grid__sidebar">、<main class="dashboard-grid__main-content">。
注意以下几点：
• 禁止三层嵌套，如 dashboard-grid__header__title —— 元素不能再包含元素
• 禁止用 grid-column: 1 / -1 强行撑满区域，这会破坏 __header 的视觉边界，后续加 border 或 box-shadow 时容易错位
• 所有样式必须落在 .dashboard-grid__header 上，不能靠父容器选择器去控制子元素样式

内层复杂网格必须升格为独立 Block

如果 dashboard-grid__main-content 里还要放一个卡片列表，且该列表自带加载态、空状态、响应式重排等逻辑，它就不是“主内容区的一部分”，而是一个具备独立职责的模块。
此时绝不能写成 dashboard-grid__main-content__card-grid —— 三层嵌套违反 BEM 基本前提，也掩盖了它的可复用性。
正确做法：
• 把它定义为独立 Block：card-grid
• 内部元素用 card-grid__item、card-grid__loading 等命名
• HTML 结构为：<div class="dashboard-grid__main-content"><div class="card-grid"></div></div>
• 禁止在 dashboard-grid.css 里写 .dashboard-grid__main-content .card-grid —— 这引入隐式依赖，违背“样式只属于一个块”的原则

响应式只改 grid-template-areas，不重命名类

BEM 类名描述的是语义角色，不是视觉位置。移动端把 sidebar 挪到 main 下面，不代表它变成 dashboard-grid__main-sidebar；抽屉展开时，也不该加 dashboard-grid__sidebar-mobile。
真正该动的只有 CSS 中的 grid-template-areas 字符串：
• PC 端："header header" "sidebar main"
• 移动端："header" "main" "sidebar"
状态变化用 Modifier：dashboard-grid__sidebar--drawer，而不是设备词修饰符。
记住：类名一旦定下，就该稳定。变的是布局逻辑，不是语义归属。

立即学习“前端免费学习笔记（深入）”；