勋章墙核心是语义结构+网格布局+状态表达：用或包裹单个成就，分组，作标题，配图标，处理交互，svg图标需带alt，grid依赖max-width、无width干扰、gap协调，状态由服务端注入而非js切换。
勋章墙不是靠堆 <div> 和 <code><img> 拉出来的，核心是语义结构 + 网格控制 + 状态表达——结构错，后续所有动效、响应式、可访问性都会打折扣。
怎么用语义化 HTML 写勋章容器
别用一长串 <div class="badge"> 平铺。每个勋章必须包裹在有明确含义的标签里，比如 <code><article></article>（单个成就）、<section></section>（成就分组）、<figure></figure>（图标+说明组合）。
常见错误：把“已解锁”状态藏在 data-unlocked="true" 里，却不给屏幕阅读器任何提示；或者用 <span></span> 套图标，导致键盘 Tab 无法聚焦、aria-label 失效。
-
<figure></figure>必须配<figcaption></figcaption>，哪怕只是重复 alt 文本，也比空着强 - 如果勋章可点击（如查看详情），用
<button type="button"></button>或带role="button"的<div>，禁用 <code><a href="#"></a> - 分组标题用
<h3></h3>，别用<div class="group-title"> —— 否则语义层级断裂，iOS VoiceOver 会跳过 <h3>grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) 怎么不崩</h3> <p>这行 CSS 是勋章墙布局的锚点，但直接复制粘贴大概率出问题：小屏错位、最后一行右对齐留白、高 DPI 下图标模糊全是因为没配齐上下文。</p> <p>关键不是写对这行，而是它依赖的三个前提都得成立：</p> <ul> <li>父容器必须设 <code>max-width（比如max-width: 1200px），否则大屏下徽章被拉成细条 - 每个勋章容器（
<article></article>或<figure></figure>）不能设width或flex，否则 grid 自动计算失效 -
gap必须用，且值要和徽章内边距协调；若徽章自身有padding: 8px，gap就别设4px，否则视觉间距失衡
如果发现小屏只显示一列，检查是否漏了 auto-fill（不是 auto-fit）——auto-fill 会保留空列占位，避免换行抖动。
徽章图标用 <img> 还是 <svg></svg>？
优先用 <img src="badge-eco.svg">，不是内联 <svg></svg>，也不是 PNG。
理由很实际：SVG 文件体积小、缩放无损、支持 fill: currentColor 随主题变色，而且浏览器能缓存。但必须满足两个硬条件：
-
<img>必须带alt，内容为成就全称，比如alt="环保新手：完成首次垃圾分类教学"，不能写 “徽章图标” - 外层容器（
<figure></figure>或<article></article>）要设固定尺寸，例如width: 120px; height: 120px;，否则object-fit: contain失效，SVG 会塌缩或溢出
如果合作方只提供 PNG，必须用 <picture></picture> + min-resolution 区分 2x/3x 屏，否则 iPad Pro 上图标发虚——<img srcset> 不够准，它按宽度切，而 Retina 屏需要按像素密度触发。
状态类名（badge--locked / badge--active）为什么不能靠 JS 切换
因为用户刷新页面后状态丢失，服务端没同步，前端改 class 只是“假装解锁”。真正该做的，是在 HTML 渲染时就由后端注入最终状态。
比如用户已获得“分类大师”，服务端返回的 HTML 就该是：
<article class="badge badge--unlocked" data-id="master-sorter"><figure>
@@##@@
<figcaption>分类大师</figcaption></figure></article>
JS 只做轻量增强：比如监听点击后加个 animate__pulse 动画，或用 IntersectionObserver 上报“用户看到了这个成就”，但绝不负责判断“能不能领”。
最容易被忽略的一点：所有状态类名必须对应真实服务端数据，且 data-id 值要和 API 接口里的成就 ID 完全一致——前后端 ID 不对齐，埋点、灰度、AB 测试全会失效。
