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

Question

我想知道当我们必须使用 BEM 和 SASS 编写可重用的 Web 组件（考虑到可能被用户覆盖）时的最佳方法：

假设有一个主元素和一个子元素，所以使用 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__child 是 .main 类的后代。 （强关系）

在第二种方法中，这两个类在 css 中技术上是分开的。由于与号 (&)。

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

Answer 1

最常见的模式是——就像你说的——第二种方法。然而，这种方法有一个很大的缺点：能够搜索组件名称。

假设您正在构建所有车辆颜色的概览，您将获得

.car {
  // Styling of a car

  &--red {
    color: red;
  }
}

.bike {
  // Styling of a bike

  &--red {
    color: red;
  }
}

关键是blocks 总是唯一的，但elements 和modifiers 不是。如果您现在需要搜索红色自行车的样式，则无法搜索 .bike--red，因为这不在您的代码中（渲染的 css 除外），如果您搜索 --red，您将获得所有红色车辆.

要解决此问题，您可以更轻松地设置如下样式：

.car {
  // Styling of a car
}

.car--red {
  color: red;
}

.bike {
  // Styling of a bike
}

.bike--red {
  color: red;
}

您的样式仍然会以正确的方式被覆盖，所有内容的特异性都为 1（有关特异性的更多信息，请参阅 this link），您可以在代码中搜索整个元素名称！