Question

编辑：

自从提出这个问题以来，我不仅意识到每个修饰符类只能有一个修饰符，但我也发现了the BEM website itself recommends using extra classes for modifiers，所以我正式采用了这种方法。

我一直在使用SASS和BEM一点点，我想知道使用多个类来修饰符与@extend - 相应的块/元素类有什么优缺点。是否有一个通常比另一个更受青睐？（考虑到我不想在@media个问题中包括课程[它应该甚至是什么？]）

多个班级的示例：

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

VS

@extend的例子：

.btn {
    // ...
}

.btn--admin {
    @extend .btn

    // ...
}

.btn--primary {
    @extend .btn

    // ...
}

Answer 1

修改我一开始没有明白这个问题。在解释之后，这是我的答案。

结果是一样的，但是使用多个修饰符类可以在非css编译或编辑方式中提供更精细的控制（您可以更改元素属性，而无需重新编译sass代码或编辑css）。它还将提供更详细的html代码阅读。通过阅读btn btn-primary disabled，您将会知道，无需使用检查员转到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; } }

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

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

希望它有所帮助。

Answer 2

我认为您想扩展多个多个类

library(rvest)
url_imb <- 'https://www.imdb.com/search/title/?count=100&release_date=2016,2016&title_type=feature'
web_page<-read_html(url_imb)

html_text(html_nodes(web_page,xpath='//p[@class=""]//a'))

使用多个类vs @extend

2 个答案: