进度条类名应带progress前缀，遵循BEM语义化规范；progress-bar__track需设宽高，__fill仅控宽度百分比；优先用CSS自定义属性--progress控制进度，渐变色通过修饰符progress-bar--success等管理。
进度条类名该不该带 progress 后缀？
应该带，而且必须是语义化前缀。BEM 要求块名（Block）直接表达组件本质，progress-bar 比 bar 或 loading 更准确——后者容易和加载动画、导航栏混淆。一旦项目里出现 nav-bar、card-bar，光看类名就无法区分用途。
实操建议：
-
progress-bar作为根块名，不缩写、不省略 - 避免用
pb、prg等缩写，CSS 里没有类型系统，缩写会提高维护成本 - 如果组件只用于表单内嵌场景，可加命名空间：
form__progress-bar，但此时它已不是独立块，而是元素（Element）
progress-bar__fill 和 progress-bar__track 哪个该设宽高？
progress-bar__track 必须设宽高（或最小尺寸），progress-bar__fill 只控制宽度百分比。常见错误是给 __fill 设 height，导致在 flex 容器中撑开高度、破坏行内对齐。
正确做法：
立即学习“前端免费学习笔记（深入）”；
-
progress-bar__track：设height: 8px、border-radius: 4px、背景色（如浅灰） -
progress-bar__fill：仅设width: 65%、background-color、border-radius（与 track 一致），不设 height - 若需支持垂直进度条，改用
height替代width，并把__fill的transform: scaleY()作为备选方案（避免重排）
用 data-percent 还是 CSS 自定义属性控制进度？
优先用 CSS 自定义属性（--progress），data-percent 适合需要 JS 动态读取原始值的场景。BEM 不限制数据绑定方式，但样式层应尽量脱离 HTML 属性依赖。
对比说明：
- 用
style="--progress: 72"：CSS 内直接写width: calc(var(--progress) * 1%);，无 JS 介入也能渲染，利于 SSR 和调试 - 用
data-percent="72"：需 JS 手动同步到 style 或 class，且 CSS 选择器变成[data-percent="72"] .progress-bar__fill，难以做范围匹配（如 0–30% 用红，30–70% 用黄） - 混合用法可行：JS 更新
data-percent同时写入--progress，但 CSS 规则以自定义属性为准，HTML 属性仅作存档
背景渐变色怎么和 BEM 共存？
渐变本身不是 BEM 关注点，但实现方式影响可维护性。别把整个渐变写死在 progress-bar__fill 里，否则换主题时要全局搜替换。
推荐结构：
- 基础色通过
progress-bar--success、progress-bar--warning等修饰符（Modifier）控制 - 每个修饰符内部定义自己的
background: linear-gradient(...)，例如：.progress-bar--warning .progress-bar__fill { background: linear-gradient(90deg, #ffcc00, #ff9900); } - 若需动态渐变（如根据百分比切换起始色），用 JS 计算后写入
--gradient-stop自定义属性，CSS 用background: linear-gradient(90deg, var(--gradient-stop), #xxx)
最易被忽略的是：渐变方向在 RTL 页面下可能需要翻转，direction: rtl 下用 background: linear-gradient(-90deg, ...) 并不自动适配，得靠媒体查询或 JS 检测。
