原生progress元素background无效因WebKit用伪元素控制样式，需用progress::-webkit-progress-bar/value；BEM修饰符应表语义状态而非数值或颜色，进度值交由CSS变量控制。
progress元素直接加background为什么没用
因为原生 <progress> 在 WebKit 内核（Chrome/Safari）中默认样式由伪元素控制，background 写在标签本身会被忽略。你看到的“进度条不动”，大概率是 CSS 没打到真正渲染的层上。
必须分两步写：
-
progress::-webkit-progress-bar控制背景轨道 -
progress::-webkit-progress-value控制已填充部分
Firefox 不支持这些伪元素，且 ::-moz-progress-bar 已废弃；更稳妥的做法是放弃原生 <progress>，改用带 role="progressbar" 的 <div> —— 这样既能统一控制，又能保证无障碍支持。
如何用BEM修饰符表达“65%完成”这类动态状态
BEM 的 --modifier 不适合直接映射百分比数值，比如 progress-bar--65 是反模式：它不可枚举、无法复用、构建时难校验，还容易和 JS 状态管理脱节。
立即学习“前端免费学习笔记（深入）”；
正确做法是把进度值交给 CSS 自定义属性，修饰符只表达语义化状态：
- 用
progress-bar--success表示“已完成”，progress-bar--warning表示“临界值”，progress-bar--error表示“失败中” - 实际进度通过
style="--progress: 65;"注入，CSS 里用background-size: calc(var(--progress) * 1%) 100%;驱动裁切 - 这样 JS 只需更新一个变量，样式逻辑完全解耦，也不用动态增删几十个类名
多色进度条的BEM类名怎么起才不混乱
颜色不是视觉装饰，而是业务状态的外显。别用 progress-bar--red 或 progress-bar--green，它们绑定具体色值，换主题就得全局搜替换。
应该按语义分组，每个修饰符对应一套完整主题配置：
-
progress-bar--theme-success→ 绿色系渐变 + 白字 + 圆角 -
progress-bar--theme-warning→ 黄橙渐变 + 深灰字 + 微圆角 -
progress-bar--theme-critical→ 红黑渐变 + 白字 + 直角
关键点：修饰符名里不出现任何颜色词或十六进制值；所有颜色由 Sass 变量或 CSS 自定义属性统一管理，BEM 只管“叫什么”，不管“长什么样”。
为什么不能写 progress-bar__track--filled
因为 __track 和 __fill 不是并列的 Element 关系，而是同一视觉块的两个表现层——轨道（track）是容器，填充（fill）是它的内容区域。BEM 要求 Element 必须是 DOM 中真实存在的节点，而“已填充部分”通常靠 background 图层叠加或 transform: scaleX() 实现，没有独立 HTML 元素。
强行拆成 progress-bar__track 和 progress-bar__fill 会导致：
- DOM 层级膨胀，增加无意义 wrapper
- JS 必须同步操作两个节点的宽度/缩放，逻辑耦合
- 响应式下难以保持比例一致（比如 Safari 对多层
background的解析有偏差）
更干净的方案是只定义 progress-bar 这个 Block，用 --progress 变量 + 单层 background 渐变 + background-clip: padding-box 控制显示范围。
