仪表盘外层必须命名为 dashboard-grid，其内部区域使用完整 bem 路径；卡片等组件须为独立 block（如 metric-card），禁止三层嵌套与视觉型 modifier；bem 分隔符是语法标记，需工具校验。
仪表盘主布局必须是独立 Block，不能叫 layout 或 container
仪表盘外层网格容器不是“通用布局工具”，而是承载具体业务职责的模块。叫 dashboard-grid 才能被搜索定位、复用判断、语义理解；叫 container 或 layout 会导致所有子元素类名失去上下文，比如 HTML 里只剩孤立的 .header、.sidebar，CSS 选择器权重失控，改一个样式可能牵出三个 bug。
常见错误是给外层加 class="container"，再靠 grid-template-areas 隐式分配区域——这等于把结构逻辑藏进 CSS，BEM 类名就只剩空壳。
-
dashboard-grid是唯一合法的外层 Block 名，它内部的区域必须用完整 BEM 路径：dashboard-grid__header、dashboard-grid__sidebar、dashboard-grid__main-content -
dashboard-grid__main-content只负责占位和网格轨道定义，不承担任何业务样式 - 内层复杂网格（比如卡片列表）必须升格为独立 Block：
card-grid，而非dashboard-grid__main-content__card-grid（三层嵌套直接违规）
卡片类组件必须是独立 Block，不能是 dashboard 的子 Element
把整个仪表盘当 dashboard Block，然后写 dashboard__metric-card，会让卡片强依赖当前页面上下文。一旦挪到告警页或报表页，__metric-card 就失去语义支撑，样式错乱、复用失效。
真正可复用的 Block 名必须表达功能点：metric-card、status-card、legend-item。它们能单独测试、上线、被其他页面引用。
- 禁止用
card-1、panel-blue这类无语义命名 - 禁止用
section、wrap这类通用容器名作为 Block -
metric-card__header是功能语义，不是 DOM 容器；里面只放metric-card__title、metric-card__header-action，不能塞div当布局 wrapper
元素层级必须控制在两层以内，禁止 block__element__subelement
BEM 允许的合法结构只有 block__element 和 block--modifier。视觉上“图表 > 图例 > 图例项 > 图标”这种四层嵌套，不能映射为 chart-container__legend__item__icon——那会破坏隔离，让图例项无法脱离图表复用。
正确做法是把图例项本身升格为 Block：legend-item，图标是它的 Element：legend-item__icon。若图例确实无复用价值，可降级为 chart-container__legend-item，但必须确保它不依赖外部样式、不跨 Block 复用。
-
metric-card__body和metric-card__footer边界必须按功能意图划分：Body 是数据承载区（含metric-card__value、metric-card__trend），Footer 是交互出口区（只放metric-card__footer-button、metric-card__footer-selector） - 如果某张卡片没有 Footer，不要留空
<div class="metric-card__footer"></div>——BEM 不要求结构完整，只要求语义准确 -
user-card__header__title这种写法结构已错：title 应直属user-card（即user-card__title），或 header 升格为独立 Block：header__title
Modifier 必须语义化，禁用视觉描述
仪表盘交互密集，容易滥用视觉型 Modifier，比如 metric-card--blue、chart-container--tall。这类命名会让主题切换、夜间模式、A/B 测试变得极其脆弱——换主题时得全局搜替换，而不是改一个变量。
Modifier 应表达状态或行为意图：metric-card--loading、chart-container--zoom-enabled、legend-item--active。它们可被 JS 控制、可组合、可单独关闭。
- 禁止用
--large、--blue、--tall等视觉词 - 尺寸、颜色、间距等表现属性必须由修饰符显式声明，且禁用
em单位（避免继承变形） - 一个修饰符只表达一种意图；不要把布局和交互塞进同一个
--horizontal-hover，应拆成--horizontal和--hoverable
最常被忽略的是：BEM 的分隔符 __ 和 -- 不是装饰，是语法标记。写错一个下划线或短横，工具链就识别不了层级，人眼也难定位归属。工程中靠人肉约定太不可靠，建议用 stylelint-selector-bem-pattern 自动校验，或直接上 CSS Modules + clsx + Tailwind 做语义兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
