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

Question

目前使用scss我理解变量，包含和嵌套。

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

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

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

所以我将类.btn__value嵌套，因为它将是按钮块内的一个span，只在那里使用它依赖于按钮父元素，所以BEM状态使用__前缀元素类名。

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

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

我正在努力找出最佳实践。如果有人有任何输入我很乐意听到它。我不是筑巢的忠实粉丝。但是因为它命名为btn--我不会在其他地方使用它。

Answer 1

我为您创建了一个非常简单的live example来帮助您了解BEM。基本上你想在sass中使用＆符号来加入类名。

我的示例有不同的类名以帮助更清楚，您可以看到CSS输出以及如何在上面的链接上使用HTML中的类的示例。

{{1}}

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