使用BEM和SASS的Web组件的最佳方法

Question

我想知道最好的方法，当我们不得不使用BEM和SASS编写可重用的Web组件（考虑到用户可能的覆盖：]]

假设有一个main元素和一个child元素，所以使用bem：

<div class="main">
  <div class="main__child"></div>
</div>
我想专注于SASS中的两种方法：

方法1）

.main {
  width: 200px;
  height: 200px;
  background-color: red;

  .main__child {
    width: 100px;
    height: 100px;
    background-color: orange;
 }
}
这对应于

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

.main .main__child {
  width: 100px;
  height: 100px;
  background-color: orange;
}
方法2）

.main{
  width: 200px;
  height: 200px;
  background-color: red;

  &__child {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
}
这对应于

.main {
  width: 200px;
  height: 200px;
  background-color: red;
}
.main__child {
  width: 100px;
  height: 100px;
  background-color: orange;
}
在第一种方法中，我们有一个更具体的规则，因此我们只能选择作为.main类后代的.main__child类。 （亲密关系）

在第二种方法中，两个类在CSS中在技术上是分开的。由于与号（＆）。

我对此感到困惑。在网络上阅读，似乎常见的模式是第二种方法。你能给我更多的解释吗？即使考虑覆盖类？

我想知道最好的方法，当我们不得不使用BEM和SASS编写可重用的Web组件（考虑到用户可能的覆盖：让我们假设有一个主要元素和一个子元素...

Answer 1

[最常见的模式是-正如您所说的-第二种方法。但是，这种方法有一个很大的缺点：能够搜索组件名称。