代码之家 › 专栏 › 技术社区 › Tristan Cottam Meulemans

使用多个类vs@extend

bem sass css html

Tristan Cottam Meulemans · 技术社区 · 8 年前

编辑:

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

我已经在BEM中使用了一点SASS,我想知道使用多个类作为修饰符vs的优缺点是什么。 @extend -对应的块/元素类。有没有一个比另一个更受欢迎?(考虑到我不会在学校里上课 @media 疑问[它应该更重要吗?)

多个类的示例:

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

示例 @延伸 ING:

.btn {
    // ...
}

.btn--admin {
    @extend .btn

    // ...
}

.btn--primary {
    @extend .btn

    // ...
}

1 回复 | 直到 8 年前

muecas 8 年前

编辑我一开始没有领会问题的要点。在解释完之后,我的答案出现了。

结果是相同的,但是使用多个类作为修饰符可以以非CSS编译或编辑的方式提供更精细的控制(您可以更改元素属性,而无需重新编译SASS代码或编辑CSS)。此外,它还将提供对HTML代码更详细的阅读。通过阅读 btn btn-primary disabled 在不使用inspector o进入css代码的情况下,您将知道您有一个按钮, btn-primary 样式和按钮 disabled . 在那里你可以得到比在一个班上更多的信息 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;
    }
}

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

希望有帮助。

推荐文章