仪表盘卡片必须按功能职责拆分为独立Block（如metric-card），而非视觉区域切分；禁止嵌套超两层、禁用无语义命名，响应式与主题切换需绕过BEM实现。
仪表盘里的卡片不能按“看起来像一块”来切，必须按功能职责拆成独立 Block，否则换到告警页或报表页就样式错乱、复用失效。
卡片必须是独立 Block，不是 dashboard 的子元素
常见错误是把整个仪表盘当 dashboard Block，然后写 dashboard__metric-card 或 dashboard__chart-container。这会让卡片强依赖当前页面上下文，一旦挪到别处，__ 前缀就失去语义支撑。
-
metric-card才是正确 Block 名——它表达“指标卡片”这个可交付功能点，能单独测试、复用、上线 -
chart-container也成立，但前提是它真有独立交互逻辑（比如缩放、导出按钮），否则应归入metric-card内部 -
status-card、alert-summary-card同理：命名带业务含义，不带位置（如left-card）或视觉（如blue-panel）
metric-card__header 里只能放头部功能元素，不能塞布局容器
metric-card__header 是功能语义，不是 DOM 容器。它只承载标题、副标题、操作按钮三类内容，所有子元素必须显式归属，且不能嵌套 Element。
- 标题用
metric-card__title，不是metric-card__header-title（违反 Element 不可嵌套） - 右上角刷新按钮用
metric-card__header-action，不是metric-card__action（避免和 footer 中的 action 混淆） - 禁止在
metric-card__header里放div或span当“布局 wrapper”——Flex/Grid 足够撑起结构，加 wrapper 只会增加无意义层级 - 如果需要图标，用
metric-card__title-icon，不是metric-card__header__icon（三层命名 = 结构超限，该抽新 Block）
metric-card__body 和 metric-card__footer 的职责边界必须清晰
Body 是数据承载区，Footer 是交互出口区。二者不能靠“高度”或“位置”判断归属，而要按功能意图划分。
立即学习“前端免费学习笔记（深入）”；
-
metric-card__body可含图表（chart-js实例容器）、数值标签（metric-card__value）、趋势箭头（metric-card__trend） -
metric-card__footer只放操作控件：跳转链接（metric-card__footer-link）、下钻按钮（metric-card__footer-button）、时间范围选择器（metric-card__footer-selector） - 若某张卡片没有 Footer，不要留空
<div class="metric-card__footer"></div>——BEM 不要求结构完整，只要求语义准确 - 响应式时，小屏下
metric-card__footer可折叠，用metric-card__footer--collapsed@sm这类修饰符（需构建工具支持解析 @sm）
真正难的不是写对 __ 和 --，而是每次加一个新类名前，得问一句：这个东西脱离当前卡片，还能被别人理解、复用、不冲突吗？
