CSS BEM命名下按钮尺寸和颜色Modifier该如何组合？

按钮尺寸修饰符必须绑定到.btn本身，不能挂载到.btn-group等容器上；.btn--lg、.btn--sm等需显式定义padding、font-size等全部尺寸属性，与.btn共用且禁止依赖父级选择器，确保语义清晰、样式正交、可叠加可维护。

按钮尺寸修饰符必须绑定到 .btn 本身，不能挂载到容器上

很多人给 .btn-group 加 --large 试图统一控制内部按钮大小，结果发现 padding 没变、字体没缩放、子元素样式漏掉——因为 .btn-group--large 并不自动透传样式到 .btn。BEM 中修饰符只作用于它直接所属的 Block 或 Element，不继承、不传播。

正确做法是让每个按钮自己声明尺寸：.btn--lg 控制自身的 padding、font-size、line-height；.btn-group 只负责间隙（gap）和对齐（flex-wrap）等布局逻辑。

1. .btn--sm、.btn--lg 这类尺寸修饰符必须和 .btn 共存，如 class="btn btn--lg"
2. 禁止写 .btn-group--lg .btn 这种依赖层级的选择器，权重低且违反 BEM 独立性原则
3. 移动端需不同尺寸时，用媒体查询调整 .btn--lg 的具体值，而不是新增 .btn--lg-mobile

颜色修饰符只能表达功能意图，不能描述视觉结果

写 .btn--blue 是典型反模式：它把设计稿里某次配色硬编码进类名，换主题时得全局搜索替换，还容易和 .btn--primary 冲突。BEM 的修饰符不是“CSS 工具类”，而是语义开关。

颜色应由设计系统抽象为有限、可枚举的功能角色，比如 --primary、--danger、--outline，它们对应明确的业务含义（主操作、危险操作、无背景强调），而非 RGB 值或 Pantone 编号。

1. ✅ 推荐：.btn--primary、.btn--outline、.btn--ghost
2. ❌ 禁止：.btn--blue、.btn--red、.btn--bg-#007bff
3. 颜色值本身应通过 CSS 自定义属性注入，如 .btn--primary { --btn-bg: var(--color-primary); }

尺寸 + 颜色修饰符可以安全叠加，但 CSS 规则必须正交

写 class="btn btn--lg btn--primary" 没问题，前提是两个修饰符修改的 CSS 属性不重叠。如果 .btn--lg 和 .btn--primary 都设置了 background-color，后加载的规则会覆盖前者，导致尺寸变大但颜色丢失。

浏览器按 CSS 文件中声明顺序和选择器权重决定最终样式。所有修饰符规则必须用单类名选择器（.btn--lg { }），不能加前缀或嵌套，否则权重下降、覆盖失效。

1. 确保 .btn--lg 只改尺寸相关属性（padding、font-size）
2. 确保 .btn--primary 只改色彩/边框相关属性（--btn-bg、--btn-text）
3. 构建工具如 cssnano 可能误删重复类名，需在配置中禁用 mergeLonghand
4. PurgeCSS 类工具必须 safelist 正则：/btn--(lg|primary|disabled)/，否则动态添加的类会被清掉

不要用修饰符替代响应式或主题切换逻辑

.btn--mobile 或 .btn--dark 这类命名看似直观，实则混淆了职责边界。BEM Modifier 描述的是组件的固有状态或功能变体，不是视口条件或主题上下文。

响应式行为应由媒体查询驱动已有类名的样式变化；主题切换应由 JS 切换根节点的 data-theme="dark"，再配合属性选择器（[data-theme="dark"] .btn--primary）控制变量值。

1. 禁止：.btn--sm 在 PC 上设 12px，在移动端又设 8px —— 尺寸修饰符应保持语义稳定
2. 正确方式：.btn--sm 定义基础小尺寸，再用 @media (max-width: 768px) 覆盖其具体数值
3. 主题色不应靠新增修饰符实现，而应通过 :root 或组件级 CSS 变量切换

实际最难把控的，是团队对「功能意图」和「视觉结果」的共识。一个 --compact 修饰符，在设计师眼里是紧凑排版，在前端眼里可能是 padding: 4px 8px，在产品经理眼里却是「适合嵌入表格操作列」——这三者必须对齐，否则类名就只是另一层幻觉。