css - 使用 Sass @extend 修改 BEM 类

Question

使用 BEM 方法，假设我有两个这样的类:

.staff__teacher

和.staff__teacher--professor

在教授的标记中，是要同时拥有这两个类还是只修改类？

<div class='staff__teacher staff__teacher--professor'></div>

或

<div class='staff__teacher--professor'></div>

在我看来，选择后者似乎更有意义，因为它更加精简且更易于阅读。

在 Sass 中，类可以通过简单地扩展 .staff__teacher 来创建。类

.staff__teacher--professor{
    @extends .staff__teacher;
    //...extra professor styles here..
}

但是，在我看到的大多数关于 BEM 的教程中，两个 类都被添加到标记中。有人可以帮助我了解一种方式是否优于另一种方式吗？使用我的方法有什么问题吗？

Answer 1

首先，这是一个相当基于意见的答案。没有什么可以阻止您使用 @extends 而不是基类。以下是可以使用两个类的一些原因。

1。不仅仅是 SASS

首先，并不是每个人都使用 SASS。甚至 LESS 直到最近才拥有 extend。一种方法不应局限于特定的预处理器或根本不局限于一个预处理器。普通的旧 CSS 就是我们在这里看到的。但是可以做这样的事情:

CSS

.button,
.button--red,
.button--green {
    // base styles
}

就我个人而言，我宁愿在编写完基本样式后单独留下它，对于按钮，我可能会有很多修饰符。对我来说，这有点困惑，因为在一个元素上放置两个类可以使我的 CSS 更干净、更简洁。

2。描述性的

BEM 的一部分是类现在更具描述性，您可以查看样式表并更好地了解模块/组件及其中包含的内容。对我来说，基类也是这样做的。当我查看我的标记时，它会为我提供更多信息。

<input type="submit class="button button--green"/>

我可以看到它是一个绿色按钮，它派生自 button，我知道我可以轻松更改它，并且可能还有其他选项可供我使用。无需查看样式表。

3。灵 active 和一致性

不要认为您永远只有一个基类和一个修饰符。你可以很容易地拥有很多。例如，我可以有 button、button--large 和 button--green。

<input type="submit class="button button--large button--green"/>

那么哪个修饰符会扩展 button？如果两者都这样做，那么您将应用相同的样式两次。另一个开发者怎么知道？通过保持简单一致的方法，您的组件更易于阅读、理解和正确使用。

总结

这些是示例中不经常使用 extend 的几个原因。我认为最重要的一点是，无论你做什么，都要确保采用一致的方法，并且所有开发人员都知道这一点。