推荐用 data-level 属性配合 CSS 伪元素生成星级标识，如 .difficulty[data-level="2"]::before { content: "★★"; color: #4a90e2; }，兼顾轻量、可维护与语义化。
用 CSS 伪元素 + data 属性实现星级难度标识
直接用 <span> 包裹文字再写三套 class（如 level-beginner）太重，也难维护。更轻量的做法是统一用 data-level 控制状态，靠 CSS 生成星号：
<span class="difficulty" data-level="1"></span> <span class="difficulty" data-level="2"></span> <span class="difficulty" data-level="3"></span>
对应 CSS：
.difficulty {
display: inline-block;
font-size: 14px;
}
.difficulty::before {
content: "★";
color: #999;
}
.difficulty[data-level="1"]::before { content: "★"; color: #666; }
.difficulty[data-level="2"]::before { content: "★★"; color: #4a90e2; }
.difficulty[data-level="3"]::before { content: "★★★"; color: #d0021b; }
- 避免用图片或字体图标——加载慢、缩放糊、语义弱
-
data-level值建议用数字而非字符串（如"beginner"），方便后续 JS 扩展排序或筛选 - 如果需支持屏幕阅读器，可加
aria-label="初级难度"，但不要仅靠 aria-label 替代视觉内容
用 SVG 内联实现可缩放、可配色的星级图标
伪元素方案在高 DPI 屏或放大页面时可能锯齿，且颜色无法单独控制每颗星。SVG 更可控：
<span class="difficulty-svg" data-level="2">
<svg width="48" height="16" viewBox="0 0 48 16">
<path d="M8 0l2.5 5.5 6 1L7.5 8.5 10 16 8 10.5 2 16 4.5 8.5 0 5.5l6-1z" fill="#4a90e2"/>
<path d="M24 0l2.5 5.5 6 1L22.5 8.5 25 16 24 10.5 18 16 20.5 8.5 18 5.5l6-1z" fill="#4a90e2"/>
<path d="M40 0l2.5 5.5 6 1L38.5 8.5 41 16 40 10.5 34 16 36.5 8.5 34 5.5l6-1z" fill="#ccc"/>
</svg>
</span>
- 只渲染当前等级对应数量的实心星，其余用灰色占位，避免 DOM 节点膨胀
- 把 SVG 写成内联而非外部引用，确保首屏不闪、不阻塞
- 若需动态更新等级（比如用户点击切换），用 JS 替换
<path>的fill属性比重绘整个 SVG 更快
Vue/React 中如何避免重复渲染星级组件
在组件化环境里，每次 props 变化都重建整个星级结构，容易引发无谓重绘。关键不是“怎么画星”，而是“怎么最小化更新”：
立即学习“前端免费学习笔记（深入）”；
- React：用
useMemo缓存 SVG 字符串或<path>数组，依赖项只设level和color - Vue：定义计算属性
stars返回长度为 3 的布尔数组，模板中用v-for渲染，但绑定 key 为"star-"+index+"-"+level，防止复用错误节点 - 禁止在 render 函数里拼接 HTML 字符串（如
`<span>★`.repeat(level)`</span>）——会绕过框架 diff，失去响应性
无障碍与国际化要注意的细节
星级只是视觉提示，不能替代文本说明。WCAG 要求所有非文本内容必须有等效文本，且支持翻译：
- 始终搭配隐藏文本，例如：
<span class="visually-hidden">中级难度</span>，配合visually-hiddenCSS 类（clip-path + border:0 等） - 不要用纯颜色区分等级（比如只靠红色表示“高”），色盲用户无法识别；必须叠加形状、数量或文字
- 如果站点支持多语言，
aria-label值应走 i18n key（如t('level.advanced')），而不是硬编码中文
最常被忽略的是：当用 JS 动态插入星级时，忘记触发 aria-live 区域更新，导致屏幕阅读器无法感知难度变化。
