按钮尺寸修饰符必须绑定到.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）等布局逻辑。
-
.btn--sm、.btn--lg这类尺寸修饰符必须和.btn共存，如class="btn btn--lg" - 禁止写
.btn-group--lg .btn这种依赖层级的选择器，权重低且违反 BEM 独立性原则 - 移动端需不同尺寸时，用媒体查询调整
.btn--lg的具体值，而不是新增.btn--lg-mobile
颜色修饰符只能表达功能意图，不能描述视觉结果
写 .btn--blue 是典型反模式：它把设计稿里某次配色硬编码进类名，换主题时得全局搜索替换，还容易和 .btn--primary 冲突。BEM 的修饰符不是“CSS 工具类”，而是语义开关。
颜色应由设计系统抽象为有限、可枚举的功能角色，比如 --primary、--danger、--outline，它们对应明确的业务含义（主操作、危险操作、无背景强调），而非 RGB 值或 Pantone 编号。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
.btn--primary、.btn--outline、.btn--ghost - ❌ 禁止：
.btn--blue、.btn--red、.btn--bg-#007bff - 颜色值本身应通过 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 { }），不能加前缀或嵌套，否则权重下降、覆盖失效。
- 确保
.btn--lg只改尺寸相关属性（padding、font-size） - 确保
.btn--primary只改色彩/边框相关属性（--btn-bg、--btn-text） - 构建工具如
cssnano可能误删重复类名，需在配置中禁用mergeLonghand - PurgeCSS 类工具必须 safelist 正则：
/btn--(lg|primary|disabled)/，否则动态添加的类会被清掉
不要用修饰符替代响应式或主题切换逻辑
.btn--mobile 或 .btn--dark 这类命名看似直观，实则混淆了职责边界。BEM Modifier 描述的是组件的**固有状态或功能变体**，不是视口条件或主题上下文。
响应式行为应由媒体查询驱动已有类名的样式变化；主题切换应由 JS 切换根节点的 data-theme="dark"，再配合属性选择器（[data-theme="dark"] .btn--primary）控制变量值。
- 禁止：
.btn--sm在 PC 上设12px，在移动端又设8px—— 尺寸修饰符应保持语义稳定 - 正确方式：
.btn--sm定义基础小尺寸，再用@media (max-width: 768px)覆盖其具体数值 - 主题色不应靠新增修饰符实现，而应通过
:root或组件级 CSS 变量切换
--compact 修饰符，在设计师眼里是紧凑排版，在前端眼里可能是 padding: 4px 8px，在产品经理眼里却是「适合嵌入表格操作列」——这三者必须对齐，否则类名就只是另一层幻觉。 
