progress-bar__track 是合法 BEM 名，progress-bar__bar 不是——它违背语义原则，真实 DOM 元素是 track 和 fill；bar 非独立视觉单元，易引发命名冲突与结构混乱。
progress-bar__track 和 progress-bar__bar 哪个是合法BEM名？
progress-bar__bar 不是合法 BEM 名——它违反了「元素名必须直接表达其在块内的语义角色」原则。进度条里没有叫 bar 的独立视觉单元；真正存在的，是「轨道（track）」和「填充区域（fill）」这两个可区分、可样式化、且 DOM 中真实存在的节点。
常见错误现象：有人把外层容器叫 progress-bar，里面再套一个 progress-bar<strong>bar</strong> 表示“实际进度部分”，结果导致命名冗余、语义模糊，还容易和按钮 buttonbar 或导航 nav__bar 冲突。
正确做法：
-
progress-bar是块名，代表整个组件 -
progress-bar__track是轨道容器，负责承载与约束 -
progress-bar__fill是填充内容，宽度/高度由进度值驱动
不要为了“听起来像进度条”而硬造 __bar，BEM 不拼英文直译，拼的是 DOM 结构与职责对齐。
立即学习“前端免费学习笔记（深入）”；
为什么不能把 track 当作 bar 的父容器来命名？
因为 progress-bar<strong>track</strong> 本身已是块的直属元素，不是某个 bar 的子元素。强行构建 progress-bar<strong>bar</strong>track 这类三层结构，既不符合 BEM「元素只能属于一个块」的规则，也会让 CSS 选择器权重失控、维护成本陡增。
使用场景：当你需要支持垂直方向时，progress-bar__fill 的 height 会替代 width，但它的语义仍是“填充区域”，不是“竖着的 bar”。
容易踩的坑：
- 把
progress-bar当作容器，又另起一个progress-bar__bar做 transform 容器，结果两个元素都设了position: relative，层级错乱 - 在 JS 中通过
querySelector('.progress-bar<strong>bar')</strong>获取进度节点，但实际结构里根本没这个类，查不到就 fallback 到fill，逻辑不一致
track 和 fill 的尺寸控制边界在哪？
progress-bar<strong>track</strong> 必须声明明确的尺寸约束（如 height: 8px、min-width: 100px），它是唯一该设宽高的元素；progress-barfill 只能用 width（或 height）做百分比伸缩，禁止设 height 或 min-height。
性能影响：给 __fill 加 height 会导致 flex 布局重排，尤其在 inline 场景下撑开行高，破坏文字基线对齐。
参数差异：
- 水平进度：
progress-bar__fill { width: var(--progress, 0%) } - 垂直进度：
progress-bar<strong>fill { height: var(--progress, 0%); width: 100% }</strong>，此时track需设width: 8px而非height
多个要点：
-
__track可加border-radius和背景色，作为底色层 -
<strong>fill</strong>的border-radius必须与track一致，否则圆角错位 - 不要用
transform: scaleX()替代width控制进度——它绕过 layout 阶段，但会干扰will-change和动画性能判断
修饰符该挂到 track 还是 fill 上？
修饰符（如 --success、--warning）应挂到块级 progress-bar 上，而不是 <strong>track</strong> 或 fill。因为颜色、阴影、圆角等视觉变体，描述的是整个组件的状态，不是某一层的局部样式。
常见错误现象：progress-bar<strong>fill--success</strong> 看似合理，但一旦要改轨道边框色或增加加载动画，就得同步写 progress-bartrack--success，违背“一个状态一个开关”原则。
正确写法：
- HTML：
<div class="progress-bar progress-bar--success"> <li>CSS：<code>.progress-bar--success .progress-bar__fill { background-color: #4caf50; }
容易忽略的地方：当进度条嵌入表单时，可能需加命名空间如 form<strong>progress-bar</strong>，这时它已不是独立 Block，而是 Form 的 Element，不能再用 --success 修饰符——得退回到 State 类，比如 formprogress-bar.is-success，因为状态由表单流程控制，不由组件自身决定。
