使用Sass @extend修改BEM类

Question

使用BEM方法论，假设我有两个类，如下所示：

`.staff__teacher`

和

`.staff__teacher--professor`

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

`

`

还是

`

`

在我看来，选择后者似乎更加合理，因为它更加简洁明了。

在Sass中，该类将通过扩展`.staff__teacher`类来创建。

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

然而，我看过的大多数BEM教程中，两种类都被添加到标记中。有没有人能帮我理解一下哪种方式更好？使用我的方法可能会导致什么问题吗？

- Lars

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"/>

我可以看到这是一个绿色的按钮，它源自于按钮，我知道我可以轻松更改它，并且可能还有其他可用选项。所有这些都不需要查看样式表。

3. 灵活性和一致性

不要认为你只会有一个基本类和一个修改器。你可以很容易地拥有许多。例如，我可以有button、button--large和button--green。

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

那么哪个修饰符能够扩展button？如果两者都可以，那么相同的样式会应用两次。其他开发人员如何知道？通过保持简单一致的方法，您的组件更清晰易读，容易正确使用。

总结

这是为什么在示例中很少使用extend的原因之一。我认为最重要的一点是，无论您做什么，请确保始终采用一致的方法，并且所有开发人员都知道这一点。

- Colin Bacon

Answer 2

  use code this sample 
  //css 

   <style>
   .firstClass{
      color:red;
      font-size:20px;
    }
    .secondClass{
        border:1px solid red;
        font-size:30px;
        display:inline-block;
    }
    .thirdclass{
       font-size:40px;
    }
    .fourthclass{
       padding:50px;
    }

   </style>

     //use code html

    <div class="firstClass secondClass thirdclass fourthclass">[e-mail]</div>
    <div class="secondClass thirdclass"> [e-mail] </div>
    <div class="thirdclass firstClass"> [e-mail] </div>
    <div class="secondClass fourthclass"> [e-mail] </div>

- Kisspa

Answer 3

// another example use css code
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
    @extend .message;
    border-color: green;
}

.error {
    @extend .message;
    border-color: red;
}

.warning {
    @extend .message;
    border-color: yellow;
}

    //write you html code

   <div class="message">[e-mail]</div>
   <div class="message success"> [e-mail] </div>
   <div class="message error"> [e-mail] </div>
  <div class="warning message"> [e-mail] </div>

- Kisspa