我正在使用Bootstrap 4构建新模板,并使用Sass对其进行编译。我有.socialgraph-gadget
,我希望display: flex
和justify-content: space-between
。
我应该做:
<div class="socialgraph-gadget d-flex justify-content-between">
<!-- awesome content -->
</div>
或删除flex实用程序类并将其添加到.socialgraph-gadget
:
.socialgraph-gadget
{
text-align: center;
display: flex;
justify-content: space-between;
}
还是我缺少一些更好的Sass-y第三选择,例如:
.socialgraph-gadget
{
text-align: center;
@extend .d-flex;
@extend .justify-content-between;
}
这是我在Bootstrap 4中经常遇到的一个问题。有太多的实用程序类,我无法决定是否最好将它们添加到(组成)或在类中定义(配置)。如果我走合成路线,最终会遇到很多类,这实际上会使html变得混乱。如果我走配置路线,那感觉就像是在给我的css文件添加不必要的膨胀。
经验法则或最佳做法是什么?谢谢。抱歉,如果这是转发。
我想说第一种选择看起来最好。如果您想创建一个简短的方法,可以在自己的styles.css文件中创建一个自定义类。
使用帮助程序类(例如Bootstrap提供的那种)的事情是,它们可能会使您的HTML变得混乱,但是这种情况经常发生,因此您不必为此担心太多。这样做的好处是,您可以在需要它们时快速放入它们,而不必重写CSS,从而节省了时间。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句