Html 引导式类排序指南

我找到了一些关于声明顺序、属性顺序的样式指南，但没有找到关于类顺序的样式指南

例如，一个开发人员执行以下操作：

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

我的按钮

另一个开发人员这样做：

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

我的按钮

---

我想为班级排序提供一致性。是否有我不知道的特殊样式指南，或者有什么最佳做法？

这取决于您如何放置按钮。 首先，您必须添加这些类-

btn btn lg btn主

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

---

mt-2 ml-3

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

我们可以使用两个相互冲突的类创建一个HTML块，一个显示元素，另一个隐藏元素

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

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

一些内容

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

这里是具有反向类顺序的相同元素

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

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

一些内容

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

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

---

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

这似乎更像是一套供您的开发团队商定的标准。两种都可以。