按钮尺寸修饰符不能加在.btn-group上，因为它是纯布局容器，只负责子元素排列与间隙，不干预padding、font-size等视觉属性；尺寸应由.btn--lg、.btn--sm等按钮自身修饰符显式定义，以符合BEM单类名原则并确保样式可预测、可复用。
按钮尺寸修饰符为什么不能加在 .btn-group 上
因为 .btn-group 是布局容器，不是视觉单元。它只该管子元素排列、间隙和换行逻辑，不应对 padding、font-size、min-height 等尺寸属性做任何干预。一旦把 .btn-group--lg 这类类名加在容器上，就会诱使开发者写 .btn-group--lg .btn 这种依赖层级的选择器——这直接破坏 BEM 的单类名原则，导致样式不可预测、无法单独复用。
真正需要响应尺寸变化的是按钮自身：.btn--sm、.btn--lg 必须显式声明全部尺寸相关属性，且不继承父级 font-size。
-
.btn--sm应包含完整定义：font-size: 0.875rem、padding: 0.375rem 0.75rem、min-height: calc(1.5rem + 2px) - 禁用
em做 padding 单位（如0.5em），嵌套时会被外层 font-size 放大，造成尺寸漂移 - 不要写
.btn-group--lg .btn { ... }，这类规则权重高、复用差、一挪结构就失效
如何让 .btn--primary 和 .btn--disabled 真正可叠加
关键不是“能不能加多个类”，而是 CSS 规则是否允许它们共存且互不干扰。常见错误是 .btn--disabled 只改了颜色和 opacity，却没重置 pointer-events 和 cursor，或者它的选择器权重低于 .btn--primary:hover，结果禁用态下 hover 效果还在。
- 所有修饰符必须用单类名选择器：
.btn--disabled { }，不带.btn前缀，避免权重陷阱 -
.btn--disabled必须显式声明：pointer-events: none、cursor: not-allowed、opacity: 0.5（别只靠 color 变灰） - hover/focus 等伪类只保留基础无障碍反馈（如
:focus-visible轮廓），状态切换交由 JS 控制类名增删 - 禁止用
.btn--primary-disabled这种耦合命名——它无法被单独移除，也不支持运行时动态切换
.btn--sm 在移动端太大？这不是修饰符的问题
BEM 修饰符表达的是设计意图，不是响应式逻辑。.btn--lg 意味着“这个按钮在当前上下文中应呈现为大号”，它不该根据屏幕宽度自动缩放。强行让修饰符承担断点适配，会污染语义、增加维护成本。
立即学习“前端免费学习笔记（深入）”；
正确做法是保持修饰符语义纯粹，再用媒体查询覆盖其行为：
@media (max-width: 480px) {
.btn--lg {
font-size: 0.875rem;
padding: 0.375rem 0.75rem;
}
}
- 不要写
.btn-group--mobile .btn--lg—— 组合选择器破坏修饰符独立性 - 所有响应式调整都应在同一份 CSS 文件中完成，避免分散到不同模块里
- 如果项目大量使用
--lg但移动端普遍要收窄，说明设计系统本身对“lg”的定义与实际场景错位，应回溯设计规范而非 patch CSS
为什么 .btn__icon 不能写成 .btn--icon
这是 BEM 最常混淆的边界问题。--icon 表示“这是一种叫 icon 的按钮类型”，而 __icon 表示“这是按钮内部的图标元素”。前者是变体（Modifier），后者是从属结构（Element）。
典型错误：给带图标的按钮加 .btn--icon，然后在 CSS 里写 .btn--icon .icon { margin-left: 0.5rem; } —— 这等于把图标位置逻辑耦合进按钮类型，一旦图标要放在右边或变成背景图，就得新增 .btn--icon-right，无限套娃。
- 正确结构：
<button class="btn"><span class="btn__icon"></span><span class="btn__text">提交</span></button> -
.btn__icon必须是.btn的**直系子节点**，否则语义断裂 - 图标尺寸/间距由
.btn__icon自身控制，不依赖.btn--lg或其他修饰符传递值 - 禁止
.btn__icon--large这种“修饰符套修饰符”——字体大小是按钮整体的视觉变体，不是图标自身的状态
