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

Question

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

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

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

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

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

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

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

我正在尝试找出最佳做法。如果有人有任何意见，我很想听听。我不太喜欢嵌套。然而，因为它的名字叫 btn-- 我不会在其他任何地方使用它。

Answer 1

我创建了一个非常简单的 live example 来帮助您理解 BEM。本质上，您想在 sass 中使用与符号来加入 class 名称。

我的示例有不同的 class 名称以帮助更清晰，您可以查看 CSS 输出以及如何在 [=19= 中使用 classes 的示例]在上面的link上。

// ----
// 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！

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

SCSS and BEM naming structures and best practices.

sass

bem