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

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

3。灵活性和一致性

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

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

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

摘要

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

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

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

使用Sass @extend修改BEM类

3 个答案:

1。这不仅仅是关于SASS

2。描述

3。灵活性和一致性

摘要