html - 使用多个类 vs @extend

Question

编辑:

问这个问题后，我不仅意识到每个修饰符类只能有一个修饰符，而且我还发现 the BEM website itself recommends using extra classes for modifiers ，所以我正式采用了这种方法。

---

我已经将 SASS 与 BEM 一起使用了一段时间，我想知道使用多个类作为修饰符与 @extend 各自的 block 的优缺点是什么/元素类。有没有一种比另一种更受青睐？ (考虑到我不会在 @media 查询中包含类 [它甚至应该重要吗？])

多个类的例子:

<div class="btn btn--admin btn--primary">

对比

@extend-ing 示例:

.btn {
    // ...
}

.btn--admin {
    @extend .btn

    // ...
}

.btn--primary {
    @extend .btn

    // ...
}

Answer 1

编辑 一开始我没明白问题的重点。解释完后，这是我的答案。

结果是一样的，但是使用多个类作为修饰符可以在非 css 编译或编辑方式中提供更精细的控制(您可以更改元素属性，而无需重新编译 sass 代码或编辑您的 css)。它还将提供更详细的 html 代码阅读。通过阅读 btn btn-primary disabled，您将知道，无需使用检查器或转到 css 代码，您有一个具有 btn-primary 样式的按钮并且该按钮被禁用。与扩展其余类的单个类 button 相比，您可以获得更多信息。例如，如果其他人要使用您的代码或在您的元素/网站上工作或构建易于使用的框架，这是一种更合适的方法。

如果它只是用于维护/更新较少的小型元素/网站，使用扩展也是一个不错的选择。有时不需要为每个元素用很多类来填充 html。

第一种方法会产生更小的 css 和更冗长的 html。第二个选项会增加你的 css 大小，同时创建更“抽象”的代码阅读。

---

使用多个类比扩展基类甚至非填充扩展(定义为 %myextend { ... })更依赖于范围。

考虑以下场景:您有多个类，它们在不同的嵌套级别(或范围)和事件通过不同的断点共享一些属性。使用多个类定义将需要大量代码和异常才能将所有类组合在一起，并且需要您复制代码(以防跨多个媒体查询共享相同代码)。

.base,
.parent .another,
.more-clases {
    // shared properties
}
@media (your-query) {
    .specific-query-class {
        //shared properties (repeated)
    }
}

在那种情况下，您将无法像使用 @extend 那样将所有类定义分组到一个定义范围内:

%my-extend {
    // shared properties
}

.base,
.parent .another,
.more-clases {
    @extend %my-extend;
}
@media (your-query) {
    .specific-query-class {
        @extend %my-extend;
    }
}

这将允许在不同的嵌套级别和媒体查询定义之间共享/分组属性 block ，而无需重复您的代码块。

使用 % 而不是 . 定义扩展将允许在不同的嵌套级别和媒体查询定义之间共享属性 block 。扩展的主要定义不会被编译为 css:定义 block 将被复制到所有扩展规则。使用 . 定义会将邮件属性 block 输出到 css 并将所有扩展类组合在一起，但使用这种类型的扩展，您可以通过不同的媒体查询进行扩展。

希望对您有所帮助。