使用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而不是基类.以下是可以使用两个类的一些原因.

这不仅仅是关于SASS

首先,不是每个人都使用SASS.即使LESS没有extend直到最近.方法不应仅限于特定的预处理器或根本不限于预处理器.简单的旧CSS就是我们在这里看到的.但是可以做这样的事情:

CSS

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

就个人而言,一旦我写完它,我宁愿单独留下基本风格.在按钮的情况下,我可能会有很多修饰符.对我来说,这有点混乱,因为在元素上放两个类可以让我的CSS更干净,更简洁.

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

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

我可以看到它是一个绿色按钮,它来自按钮,我知道我可以轻松地改变它,并且可能还有其他选项供我使用.所有这些都没有看样式表.

不要以为你只会有一个基类和一个修饰符.你可以很容易地拥有很多.例如,我可以拥有button,button--large和button--green.

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

那么哪个修饰符会延伸button？如果两者都有,那么你会有两次相同的样式.另一位开发者如何知道？通过保持简单一致的方法,您的组件可以更清晰地阅读,理解和正确使用.

这些是为什么在示例中不经常使用扩展的几个原因.我认为最重要的一点是,你做的是确保一致的方法,所有开发人员都知道这一点.