SCSS 和 BEM 命名结构和最佳实践。

Question

目前使用 scss 我了解变量、包含和嵌套。

我正在尝试创建一个使用 BEM 命名结构的新 scss 设置。所以例如

.btn {
  padding: 20px;
  .btn__value {
    color: $valColour;
  }
}

.btn--gold {
  color: $gold;
}

所以我有类 .btn__value 嵌套，因为它将是按钮块内部的一个跨度，并且只在那里使用，它取决于按钮父元素，所以 BEM 状态使用 __ 作为元素类名的前缀。

但是按钮的颜色是样式器，因此它们没有嵌套（我不确定这一点，因为我可能会像下面这样嵌套这个。）

.btn {
  padding: 20px;
  .btn__value {
    color: $valColour;
  }
  &.btn--gold {
    color: $gold;
  }
}

我正在尝试为此找出最佳实践。如果有人有任何意见，我很乐意听到。我不是嵌套的忠实粉丝。但是，由于它名为 btn--我不会在其他任何地方使用它。

Answer 1

我为您创建了一个非常简单的实例来帮助您理解 BEM。本质上，您想在 sass 中使用与号来连接类名。

我的示例具有不同的类名以帮助使其更加清晰，您可以在上面的链接中查看 CSS 输出以及如何在 HTML 中使用这些类的示例。

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$defaultColor: black;
$gold: gold;

// Block
.btn {
  color: $defaultColor;
  padding: 20px;

  // Element
  &__span{
    font-weight: 600;
  }

  // Modifier
  &--no-padding{
    padding: 0;
  }  
  // Modifier
  &--gold{
    color: $gold;
  }
}

希望这有助于为您清除 BEM！