BEM 中的多个修改器

Question

我有组件按钮

<button type="button" className="button button_size_large button_color_primary button_type_fill">
    <Icon className="button__icon" type={'bc-icon-info'} disabled={false} isFilled={true} />
    <span className="button__text">Button</span>
</button>

每个修饰符都发生变化

• button_color_primary
  • 按钮类型填充
  • 按钮_类型_轮廓
  • 按钮_类型_文本
• 按钮_颜色_次要
  • 按钮类型填充
  • 按钮_类型_轮廓
  • 按钮_类型_文本
• button_color_danger
  • 按钮类型填充
  • 按钮_类型_轮廓
  • 按钮_类型_文本

等等...

在 scss 中我创建了这个

    &_color_primary {
        &.button_type_fill {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
        &.button_type_outline {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
        &.button_type_text {
            &:hover {}
            &:focus {}
            &:active {}
            &:disabled {}
            .button__text { }
            .button__icon { }
        }
    }

这样对于 _secondary 来说，_danger。 我认为这不是一个好方法。请提供您的建议。

Answer 1

您可以为全局选择器设置全局样式，例如

button_type_fill

，然后仅在变体中设置颜色，例如

button_color_primary