仪表盘 Block 划分必须基于功能域而非视觉区域，每个 Block（如 metric-card、legend-item）须独立可复用、语义化命名、嵌套不超过两层、Modifier 须语义化且不表达视觉，响应式与主题切换应绕过 BEM 实现。
仪表盘的 Block 划分必须基于功能域，而非视觉区域
仪表盘不是“头部+侧边栏+主内容”这种布局切分，而是按业务功能划分独立 Block：比如 dashboard-header、dashboard-sidebar、metric-card、chart-container、data-table。每个 Block 必须能脱离当前页面单独复用——把 metric-card 拿到报表页或告警页里，样式和结构不能崩。
常见错误是把整个仪表盘当一个 Block 命名为 dashboard，然后写 dashboard__header、dashboard__sidebar……这会导致所有子元素强耦合于当前页面上下文，一旦换场景就失效。
-
dashboard-header是独立 Block，不是dashboard的 Element；它内部可含dashboard-header__logo、dashboard-header__user-menu - 卡片类组件统一用
metric-card或status-card这类语义化 Block 名，避免card-1、panel-blue等无意义命名 - 禁止用
section、container、wrap这类通用容器名作为 Block，它们不表达功能，无法复用
仪表盘中嵌套层级必须控制在两层以内
BEM 允许的合法结构只有 block__element 和 block--modifier，不允许出现 block__element__subelement。仪表盘里常见的“图表 > 图例 > 图例项 > 图标”这种视觉嵌套，不能直接映射为 CSS 类名。
正确做法是：图例项本身就是一个独立 Block（如 legend-item），它被用在 chart-container 内部，但类名不带父级前缀；图标则属于 legend-item 的 Element，即 legend-item__icon。
立即学习“前端免费学习笔记（深入）”；
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 错误写法：
chart-container__legend__item__icon（四层，破坏隔离） - 正确写法：
legend-item（Block） +legend-item__icon（Element） +legend-item--active（Modifier） - 若图例只在图表中出现且无复用价值，可降级为
chart-container__legend-item，但必须确保它不依赖外部样式、不跨 Block 复用
状态类 Modifier 必须语义化，禁用视觉描述
仪表盘交互密集，容易滥用视觉型 Modifier，比如 metric-card--blue、chart-container--tall。这类命名会让主题切换、夜间模式、A/B 测试变得极其脆弱。
Modifier 应表达意图而非外观：metric-card--warning 表示该指标触发预警，而不是“背景变黄”；chart-container--loading 表示数据未就绪，而不是“加个 spinner”。样式细节由 SCSS 变量或 CSS 自定义属性控制。
- 允许：
metric-card--critical、data-table--empty、dashboard-sidebar--collapsed - 禁止：
metric-card--green、chart-container--wide、dashboard-header--small - 多个 Modifier 可共存，但需互斥逻辑清晰：
metric-card--critical--loading合理，metric-card--critical--success就矛盾
仪表盘中响应式与主题切换必须绕过 BEM 实现
BEM 不负责响应式断点或主题色切换——这些属于系统级配置，不应塞进类名。你不会看到 metric-card--mobile 或 chart-container--dark 这种写法。
正确路径是：用 CSS 自定义属性定义主题变量（--metric-card-bg、--chart-line-color），配合媒体查询或 class 切换（如 theme-dark）驱动样式变化；BEM 类只管结构归属，不参与表现逻辑。
- HTML 中只需：
<div class="metric-card">，不加任何响应式 Modifier - SCSS 中通过
.theme-dark .metric-card { --metric-card-bg: #1e1e1e; }控制主题 - 移动端适配靠 Flex/Grid 容器自身行为，或用
@media (max-width: 768px)调整metric-card的 display 或 gap，而非新增 Modifier
data-table 的 Element，往往取决于它是否在其他页面复用。这点必须在设计阶段就对齐，否则后期重构成本远高于初期多花十分钟讨论。 
