仪表盘 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 前端开发

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 <li>SCSS 中通过 <code>.theme-dark .metric-card { --metric-card-bg: #1e1e1e; } 控制主题
• 移动端适配靠 Flex/Grid 容器自身行为，或用 @media (max-width: 768px) 调整 metric-card 的 display 或 gap，而非新增 Modifier
仪表盘的复杂性不在样式数量，而在 Block 边界的模糊性——一个“筛选器组”到底是独立 Block 还是 data-table 的 Element，往往取决于它是否在其他页面复用。这点必须在设计阶段就对齐，否则后期重构成本远高于初期多花十分钟讨论。