8

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

4

3 回答 3

9

首先，这是一个相当基于意见的答案。没有什么可以阻止您使用@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 的几个原因。我认为最重要的一点是，无论您做什么，都要确保采用一致的方法，并且所有开发人员都知道这一点。

于 2014-05-19T17:35:17.203 回答
1 
  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>
于 2014-05-22T08:26:39.963 回答
-1 
// 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>
于 2014-05-22T08:33:22.867 回答