Css 什么'；在Bootstrap 4中添加多个类的正确方法是什么？

我正在使用Bootstrap4构建一个新模板，并使用Sass编译它。我有

.socialgraph小工具

，我希望它既能

显示：flex

又能

调整内容：间距

我是否应该这样做：

<div class="socialgraph-gadget d-flex justify-content-between">
  <!-- awesome content -->
</div>

还是有更好的sass-y第三种选择我没有，比如：

.socialgraph-gadget
{
  text-align: center;
  @extend .d-flex;
  @extend .justify-content-between;
}

这是我在Bootstrap4中经常碰到的问题。有太多的实用程序类，我无法决定是添加它们（组合）还是在类（配置）中定义它们更好。如果我走合成路线，我会得到太多的类，这真的会把html弄得乱七八糟。如果我选择配置路径，我会觉得我在给css文件添加不必要的膨胀

---

这里的经验法则或最佳实践是什么？谢谢很抱歉，如果这是一个重新发布。

我认为第一个选项看起来是最好的。如果您想创建一个更短的方法，可以在您自己的styles.css文件中创建一个自定义类

使用helper类（像Bootstrap提供的那种）的问题是，它们可能会使HTML变得混乱，但这种情况经常发生，您不必太担心。这样做的好处是，您可以在需要的时候快速地将它们放入，而不必重写CSS，从而节省了时间

.socialgraph-gadget
{
  text-align: center;
  @extend .d-flex;
  @extend .justify-content-between;
}