chart-card 必须是独立 block，因其需脱离页面上下文在邮件、toast、iframe 等无父容器环境中正常渲染；若写成 dashboard__chart-card，将导致样式丢失、ci 报错、补全失效及 purgecss 误删。
图表卡片必须作为独立 chart-card Block，不能写成 dashboard__chart-card 或 report-section__card——否则在告警弹窗、邮件模板、移动端摘要页中复用时，样式会因父级类缺失而失效，PurgeCSS 也会误删规则。
为什么 chart-card 必须是 Block，而不是某个容器的 Element
判断标准只有一个：它能否脱离当前页面上下文独立存在并正常渲染。真实场景里，chart-card 会被插入到邮件 HTML、Toast 提示、侧边分析面板、甚至第三方嵌入 iframe 中——这些环境没有 dashboard 或 report-section 类。一旦写成 dashboard__chart-card：
-
stylelint-selector-bem-pattern在 CI 阶段直接报错，阻断提交 - VS Code 的 PostCSS 插件无法识别该类为合法 BEM 元素，补全和跳转失效
- PurgeCSS 扫描不到
dashboard上下文，判定dashboard__chart-card未使用，整块 CSS 被清空 - DOM 结构微调（比如把
<div class="dashboard"> 换成 <code><section></section>）后，所有样式静默丢失，控制台无任何提示chart-card__title和chart-card__chart这些 Element 名怎么定才不越界Element 名必须表达「它是什么」，而非「它用什么标签实现」或「它长什么样」。常见错误是照搬 DOM 或视觉结构：
-
chart-card__svg❌ —— 实现可能换成 Canvas 或 Web Component，语义断裂 -
chart-card__container❌ ——container是通用词，不表达功能，工具链拒绝识别 -
chart-card__header❌ —— 模糊，易与chart-card__toolbar或chart-card__controls混淆 -
chart-card__title✅ —— 明确表达“图表标题区域”，可渲染<h3></h3>、<div role="heading"> 或带图标的复合结构 <li> <code>chart-card__chart✅ —— 表达“可视化主体”，内部可嵌套独立 Block（如legend-item、tooltip-trigger） -
chart-card--loading✅ —— 卡片整体处于加载态，影响chart-card__title、chart-card__chart、chart-card__footer多个元素，语义统一 -
chart-card__chart--empty✅ —— 空状态仅作用于图表区域，不影响标题或操作栏，职责清晰 -
chart-card__title--small❌ —— 尺寸是布局细节，应由主题变量或响应式断点控制，非业务状态 -
chart-card--blue❌ —— 视觉描述，换夜间模式或品牌色时需全局搜索替换，不可维护 -
is-loading✅ —— JS 控制时统一增删该类，不侵入 BEM 结构；CSS 中写.chart-card.is-loading .chart-card__chart即可，避免硬编码修饰符名 - 漏空格：
className={`${block}__chart${loading ? '--loading' : ''}`→ 渲染为chart-card__chart--loading，但实际需要的是chart-card chart-card__chart--loading，缺了基础 Block 类 - 大小写混用：
ChartCard__chart和chart-card__chart在 CI 环境视为不同类名，样式丢失且无报错 - 模板字符串逃逸失败：
class="chart-card__chart--${status}"→ PurgeCSS 无法识别运行时生成的chart-card__chart--error，该规则被删除
注意：
chart-card__chart不得再嵌套__，即禁止chart-card__chart__axis；轴线若需独立样式与逻辑，应拆为chart-axisBlock。chart-card--loading和chart-card__chart--empty这类 Modifier 怎么挂才合理Modifier 必须依附于明确宿主，且只表达意图或状态，不暴露实现细节：
特别注意：
--只能用于 block 或 element 后，禁止跨级，如chart-card--loading__chart是非法写法，语法上不存在这种结构。动态类名拼接时最容易漏掉的三个断裂点
手拼字符串在本地常跑得通，但在 Linux 构建环境或 PurgeCSS 扫描阶段极易出问题：
推荐做法：封装
bem('chart-card', { chart: true, loading: isLoaded })工厂函数，或用clsx配合常量BLOCK = 'chart-card'，确保每个类名都经静态校验，且能被构建工具完整捕获。 -
