尺寸修饰符必须绑定到块本身，不能挂载到容器上；.btn--sm、.card--lg等需显式定义font-size、padding、line-height等全部尺寸属性，确保语义清晰、样式正交、可叠加可维护。
尺寸修饰符必须绑定到块本身，不能挂载到容器上
按钮组、卡片列表这类容器不是尺寸决策点，.btn-group--lg 或 .card-list--sm 无法控制内部子元素的 padding、font-size、line-height，最终只会漏样式、权重混乱、复用困难。真正该承载尺寸语义的是块自身：.btn--sm、.card--lg、.icon--xl，每个都显式声明全部相关属性。
常见错误现象：
-
.btn-group--lg .btn覆盖失效——因为选择器权重低，且脱离.btn本体语义 - 移动端按钮文字被裁切——
.btn--lg只改了font-size，没同步调padding和min-height - 图标在不同组件里大小不一致——用了
button__icon--sm却没抽成独立icon--sm块
尺寸修饰符要正交定义，避免属性重叠覆盖
每个尺寸类必须只负责自己维度的样式，且所有尺寸相关属性（font-size、padding、border-width、height、line-height）同步响应。不能只调字号，也不能靠 transform: scale() 或全局 font-size 缩放——它们破坏布局流、点击热区和无障碍可访问性。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.btn { font-size: 1rem; padding: 0.5em 1em; border-width: 2px; }
.btn--sm { font-size: 0.875rem; padding: 0.375em 0.75em; border-width: 1px; }
.btn--lg { font-size: 1.125rem; padding: 0.625em 1.25em; border-width: 3px; }
关键点：
- 单位优先用
em或固定比例rem（如0.375rem），避免px在缩放场景下失准 - 禁用
em嵌套计算（如父级font-size: 1.2rem→ 子padding: 0.5em就会放大） - 图标宽高需随修饰符变化：
.icon--sm { width: 1em; height: 1em; }，而非background-size: contain
响应式不是修饰符的事，而是媒体查询 + 修饰符协作
.btn--lg 表达的是“这是大号按钮”这一设计意图，不是“在桌面端显示为大号”。BEM 修饰符是静态、离散、可枚举的状态，不承担响应式逻辑。想让 .btn--lg 在小屏变小，不能新增 .btn--lg-mobile，而应在媒体查询中覆盖其行为：
@media (max-width: 480px) {
.btn--lg {
font-size: 1rem;
padding: 0.5em 1em;
}
}
这样既保留设计语义，又解耦了视口逻辑。注意：
- 禁止写
.btn--lg-sm或.btn--lg@mobile—— 语义断裂，JS 切换时无法判断加哪个类 - 所有尺寸修饰符必须能脱离
@media独立存在，删掉媒体查询后 UI 仍应可读、可交互 - 若真需多套尺寸体系（如设计系统定义
--xs/--sm/--md），每套必须互斥、不可混用
尺寸与颜色/状态修饰符叠加时，CSS 规则必须单类名、无嵌套
class="btn btn--lg btn--primary" 是合法且推荐的组合方式，但前提是两个修饰符修改的属性不重叠。一旦 .btn--lg 和 .btn--primary 都设置了 background-color，后加载的规则就会覆盖前者。
安全做法：
- 所有修饰符 CSS 规则必须用单类名选择器：
.btn--lg { }，不能写成.btn.btn--lg { }（权重下降）或.btn-group .btn--lg { }（破坏独立性） - 尺寸类只改尺寸相关属性；颜色类只改颜色、阴影等视觉属性；状态类（如
--loading）只管动画、光标等运行时反馈 - 如果组件含自定义属性（如
--btn-scale），确保所有尺寸属性都参与calc()计算，且兼容旧版 Safari
最容易被忽略的是：尺寸修饰符不是“让东西看起来小一点”，而是“在设计系统中明确表达一种可复用、可测试、可静态分析的尺寸契约”。一旦允许 JS 动态拼接 btn--${size} 或模糊匹配 [class*="--sm"]，BEM 就退化成带连字符的普通命名而已。
