用于类排序的Bootstrap样式指南

Question

我发现了一些有关声明顺序，属性顺序的样式指南，但没有关于类顺序的样式指南。

例如，一个开发人员这样做：

<div class="btn btn-primary btn-lg mt-2 ml-3">My button</div>

另一位开发人员这样做：

<div class="mt-2 ml-3 btn btn-lg btn-primary">My button</div>

我想保持类排序的一致性。是否有我不知道的特殊样式指南，或者对此有最佳实践？

Answer 1

我不知道任何有关类排序的指南，因为元素上的类顺序对特异性没有任何影响。它们只是对源CSS的引用，并且将遵循CSS中发生的所有级联效果。

我们可以用两个冲突的类组成一个HTML块，一个类显示一个元素，另一个隐藏该元素。

<div class="show hide">
  <p>Some content</p>
</div>

.show { display: block; }
.hide { display: none; }

这里是与逆类顺序相同的元素。

<div class="hide show">
  <p>Some content</p>
</div>

.show { display: block; }
.hide { display: none; }

这两个块都将被隐藏，因为它们将遵循CSS的级联效果。

我建议您做最有意义的事情，并保持一致。

Answer 2

这取决于您放置按钮的方式。 首先，您添加了这些类-

btn btn-lg btn-primary

因为它在特定的div中获得了空间， 然后，您必须添加影响按钮属性的类-

mt-2 ml-3