.btn--sm 必须显式定义 font-size、padding、min-height、line-height 和 border-radius，禁用 em 单位且不继承父级字号；不能加在 .btn-group 上，因其仅为布局容器，加修饰符会破坏 bem 单类名原则并导致样式不可预测。
直接给 .btn--sm 写完整尺寸声明，别让它继承、别用 em、别挂到容器上。
为什么不能把 --sm 加在 .btn-group 上
因为 .btn-group 是纯布局容器，只管子元素排列和间隙，不干预 padding、font-size、min-height。一旦加了 .btn-group--sm，就会诱使你写 .btn-group--sm .btn 这种依赖层级的选择器——这违反 BEM 单类名原则，样式不可预测，一挪结构就失效。
真正该响应尺寸变化的是按钮自身：.btn--sm 必须显式定义全部尺寸属性，且不继承父级 font-size。
.btn--sm 的 CSS 必须包含哪些属性
它不是“微调”，而是完整定义小号按钮的视觉契约。漏掉任意一项，都可能在嵌套或高密度场景下出错：
-
font-size: 0.875rem（显式声明，不靠继承） -
padding: 0.375rem 0.75rem（禁用em，避免被外层放大） -
min-height: calc(1.5rem + 2px)（保证点击区域达标） -
line-height: 1.5（与font-size匹配，防文字截断） -
border-radius: 0.25rem（尺寸缩小时，圆角也应同比例收敛）
常见错误：.btn--sm 在卡片或弹窗里还是太大
这不是修饰符写错了，而是混淆了「语义尺寸」和「响应式适配」。BEM 修饰符表达的是设计意图（“这个按钮在此上下文应为小号”），不是设备适配逻辑。
正确做法是保留 .btn--sm，再用媒体查询单独覆盖：
@media (max-width: 480px) {
.btn--sm {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}
别在 .btn--sm 里塞 @media，否则语义污染，后期维护成本翻倍。
多个修饰符连用时，.btn--sm 顺序和冲突怎么处理
class 顺序本身不影响样式生效（CSS 权重看选择器，不是 HTML 里 class 出现顺序），但影响可读性和协作效率：
- 推荐固定顺序：
btn btn--primary btn--sm btn--disabled（基础 → 语义 → 尺寸 → 状态） - 禁止穿插写法：
btn--sm btn btn--primary容易漏加、难定位 - 所有修饰符必须用单类名选择器：
.btn--sm { }，不写.btn.btn--sm { }，否则权重不够，叠加时被.btn--primary覆盖
真正容易被忽略的是：尺寸修饰符不该碰 margin 或 display —— 那属于布局职责，应交给工具类或父容器控制。一个 .btn--sm 只负责自己“小”，不负责“离上面那个按钮多远”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
