用 .button--sm、.button--md、.button--lg 显式定义全部尺寸属性，不继承、不缩放、不依赖父级 font-size；必须声明 font-size、padding、min-height、line-height 和 border-radius，漏一项易在嵌套场景出错。
直接结论：用 .button--sm、.button--md、.button--lg 这类块级修饰符显式定义全部尺寸属性，不继承、不缩放、不依赖父级 font-size。
为什么不能只改 font-size 或用 transform: scale()
只调 font-size 会导致 padding 不变、按钮高度失衡，文字贴边或留白过大；用 transform: scale(0.8) 会破坏点击热区（实际可点区域没缩）、影响子元素布局流、让图标边框失真，且 SSR 渲染时可能错位。BEM 修饰符要的是「视觉契约」，不是临时视觉变形。
.button--sm 必须声明哪些 CSS 属性
漏掉任意一项，嵌套在卡片、弹窗或高密度列表中就容易出错：
-
font-size: 0.875rem—— 显式值，禁用em或继承 -
padding: 0.375rem 0.75rem—— 用rem或固定值，避免被外层放大 -
min-height: calc(1.5rem + 2px)—— 保证触控/点击区域 ≥ 44px -
line-height: 1.5—— 匹配font-size，防文字截断或上下偏移 -
border-radius: 0.25rem—— 小尺寸下圆角也需同比例收敛，不能沿用默认0.375rem
常见错误：把尺寸修饰符加在容器上，比如 .button-group--sm
.button-group 是纯布局容器，只管排列和间隙，不干预按钮自身尺寸。一旦写 .button-group--sm .button，就违背 BEM 单类名原则——样式强依赖 DOM 结构，一挪位置就失效，也无法和 .button--primary 叠加。真正该响应尺寸变化的是按钮自己：.button--sm 必须独立、完整、可随处使用。
立即学习“前端免费学习笔记（深入）”；
尺寸修饰符和响应式不是一回事
.button--sm 表达的是设计意图：“这个按钮在此上下文应为小号”，不是“在小屏设备上才变小”。如果它在移动端卡片里还是太大，别改修饰符，而是加媒体查询单独覆盖：@media (max-width: 480px) { .card .button--sm { padding: 0.25rem 0.5rem; } }。混淆语义尺寸与响应式适配，是后期维护混乱的起点。
