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

Question

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

假设有一个主元素和一个子元素，所以使用 bem:

<div class="main">
  <div class="main__child"></div>
</div>

我想重点介绍 SASS 中的两种方法：

方法一)

.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;
}

方法二)

.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;
}

在第一种方法中，我们有一个更具体的规则，因此我们可以 select 只有 classes .main__child 是 .main class 的后代。（强关系）

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

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

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）并且您可以在代码中搜索整个元素名称！

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

Best approach for web component using BEM and SASS

css

sass

bem