命名多个复杂修饰符的BEM约定

我一直困惑于寻找命名多个修饰符的最佳方法, 我知道这种方法的基本规则,并且阅读了BEM官方快速入门文档(bem.info/methodology/quick-start)

当我在一个块中有一些修饰符而其中的一个修饰符对另一个修饰符有一些影响时,我对修饰符命名有问题(换句话说,一个修饰符除了修改主块之外,还正在修改该块的另一个修饰符)

我没有使用简单的示例说明这种情况,所以,请告诉我以下示例中的哪一个是正确的最佳选择:

解决方案1)

SCSS:

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&}--primary {
        border: 1px solid blue;
    }
    &--outline#{&}--secondary {
        border: 1px solid black;
    }
}

编译的CSS:

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline.btn--primary {
  border: 1px solid blue;
}
.btn--outline.btn--secondary {
  border: 1px solid black;
}

HTML用法示例:

<a href="#" class="btn btn--primary btn--outline>...</a>

解决方案2)

SCSS:

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&} {
        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译后的CSS与解决方案1相同

HTML中的用法示例也与解决方案1相同

实际上,我只是在修饰符中进行了嵌套,以防止重复“轮廓”,

解决方案3)

SCSS:

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;

        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译的CSS:

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline--primary {
  border: 1px solid blue;
}
.btn--outline--secondary {
  border: 1px solid black;
}

HTML用法示例:

<a href="#" class="btn btn--outline btn--outline--primary">...</a>

解决方案4)

SCSS:

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        &--primary {
            background: transparent;
            border: 1px solid blue;
        }
        &--secondary {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的CSS:

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline--primary {
  background: transparent;
  border: 1px solid blue;
}
.btn--outline--secondary {
  background: transparent;
  border: 1px solid black;
}

HTML用法示例:

<a href="#" class="btn btn--outline--primary">...</a>

如您所见,此解决方案更易于在HTML中使用,但是我们在每个主要和次要修饰符中都复制了相同的CSS属性(在这种情况下,我们正在复制background:transparent;在其他修饰符中),您可能会认为这没关系,但是在实际情况下,我们可能拥有很多在许多地方重复的属性,因此,肯定的是,此解决方案对于将来该组件的开发将存在重要问题

解决方案5)

SCSS:

.btn {
    font-size: 14px;

    &--primary {
        background: blue;

        &--outline {
            background: transparent;
            border: 1px solid blue;
        }
    }
    &--secondary {
        background: black;

        &--outline {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的CSS:

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--primary--outline {
  background: transparent;
  border: 1px solid blue;
}
.btn--secondary {
  background: black;
}
.btn--secondary--outline {
  background: transparent;
  border: 1px solid black;
}

HTML用法示例:

<a href="#" class="btn btn--primary--outline">...</a>

在此解决方案中,我们也有重复的属性(例如解决方案4)

因此它没有良好的开发结构,并且会打扰大型组件的程序员

我只想知道哪种解决方案是最佳选择,或者如果您对此问题有其他解决方案,请根据此按钮示例进行编写。

我也再次提到这一点: 我以很小的实际组件比例编写了该示例,因此在该示例中似乎不关心属性或类名称的任何重复,但是在实际项目中更复杂的情况下,这将是一个严重的问题用于开发组件。

评论