使用 Sass @extend 修改 BEM 类答案

【问题标题】：Modifying BEM classes with Sass @extend使用 Sass @extend 修改 BEM 类
【发布时间】：2014-07-03 17:15:03
【问题描述】：

使用 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 的教程中，两个类都添加到了标记中。有人可以帮助我了解一种方法是否比另一种更可取吗？使用我的方法可能会导致任何问题吗？

【问题讨论】：

标签： css naming bem

【解决方案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 的几个原因。我认为最重要的一点是，无论您做什么，都要确保采用一致的方法，并且所有开发人员都知道这一点。

【讨论】：

【解决方案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">khitsapanadilove@gmail.com</div>
    <div class="secondClass thirdclass"> khitsapanadilove@gmail.com </div>
    <div class="thirdclass firstClass"> khitsapanadilove@gmail.com </div>
    <div class="secondClass fourthclass"> khitsapanadilove@gmail.com </div>

【讨论】：

【解决方案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">khitsapanadilove@gmail.com</div>
   <div class="message success"> khitsapanadilove@gmail.com </div>
   <div class="message error"> khitsapanadilove@gmail.com </div>
  <div class="warning message"> khitsapanadilove@gmail.com </div>

【讨论】：