按钮组尺寸修饰符不应加在 .btn-group 上，而应作用于 .btn 自身；.btn-group 仅负责布局，尺寸控制须由 .btn--lg、.btn--sm 等独立修饰符显式定义，并避免父级覆盖、单位混乱与命名失控。
按钮组尺寸修饰符该不该加在 .btn-group 上
不该。按钮组（.btn-group）是容器级 Block，它本身不决定内部按钮的尺寸，只负责布局逻辑（如间隙、对齐、换行控制）。把 --large 这类尺寸修饰符加在 .btn-group 上，容易误导向“整个组变大”，实际却无法统一控制子按钮的 padding、font-size、line-height 等关键参数，反而造成样式泄露或覆盖困难。
真正该响应尺寸变化的是按钮自身：.btn 块，以及它的修饰符，比如 .btn--lg、.btn--sm。按钮组只需提供中性容器语义，例如：
<div class="btn-group"> <button class="btn btn--sm">小</button> <button class="btn btn--lg">大</button> </div>
btn--sm / btn--lg 这类修饰符怎么写才不冲突
必须用单类名规则，且避免依赖父级上下文重置样式。常见错误是写成 .btn-group--lg .btn { ... }，这会让 .btn--lg 失效——因为权重低、可复用性差、脱离按钮本体语义。
-
.btn--sm应直接定义所有尺寸相关属性：padding、font-size、min-height、line-height - 禁用 em 或 rem 做内边距单位（如
padding: 0.25em 0.75em），嵌套时易被放大；统一用px或固定比例的rem（如0.375rem） - 不要让
.btn--sm依赖.btn的 font-size 继承——显式声明font-size: 0.875rem，否则在标题附近使用会意外放大 - 如果用 CSS 变量控制缩放（如
--btn-scale: 0.8），需确保所有尺寸属性都参与计算：padding: calc(var(--btn-scale) * 0.75rem) calc(var(--btn-scale) * 1.5rem)
响应式场景下 btn--lg 在移动端太大怎么办
这不是修饰符的问题，而是「尺寸修饰符」和「断点适配」属于两个正交维度。BEM 修饰符只表达一种明确、离散的状态（如“这是大号按钮”），不负责响应式切换。
立即学习“前端免费学习笔记（深入）”；
正确做法是：保留 .btn--lg 表达设计意图，再用媒体查询单独覆盖其行为：
@media (max-width: 480px) {
.btn--lg {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
}
}注意：不要在媒体查询里写 .btn-group--mobile .btn--lg 这类组合选择器，它破坏了修饰符的独立性和可预测性。
能不能用 btn--xs / btn--xl 扩展更多尺寸档位
可以，但必须提前收敛命名策略并同步设计系统。BEM 不限制修饰符数量，但失控的尺寸枚举（如 --tiny、--mini、--ultra）会迅速污染 class 白名单、增加 JS 动态拼接风险。
推荐做法：
- 只维护 3–4 档语义清晰的尺寸：
--sm、--md（默认无修饰符）、--lg、--xl - 所有尺寸修饰符必须有对应的设计标注值，不能凭感觉添加
- 若某业务页真需要临时微调，优先用行内 style 或局部 scoped class，而非新增全局修饰符
- JS 动态渲染按钮时，禁止拼接
"btn btn--" + size——size 必须来自白名单数组：["sm", "md", "lg", "xl"]，并做小写 + trim 校验
尺寸修饰符不是越多越好，而是要让每个都经得起“这个按钮为什么是 --lg”的业务追问。一旦开始为某个弹窗特供写 .btn--modal-close，就说明修饰符已经越界了。
