单个元素html上的多个类

Question

在一个HTML元素上使用多个类是一个好习惯吗？例如：

<div class="nav nav-centered nav-reversed navbar navigation-block"></div>

我不是说一个元素上的两个或三个类是坏的，但四个，五个甚至六个怎么样？

Answer 1

简答

是

---

说明

这是良好做法，因为元素可以是不同组的一部分，并且您可能希望特定元素成为多个的一部分组即可。该元素可以在HTML5中保存无数个类，而在HTML4中，您受到specific length的限制。

以下示例将向您展示多个类的使用。

第一堂课将文字color 设为红色。

第二节课使background-color 蓝色。

了解具有多个类的 DOM元素将如何表现，它将同时佩戴两个 CSS语句。

结果：不同类中的多个CSS语句将叠加。

您可以阅读有关CSS Specificity的更多信息。

---

CSS

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

HTML

<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>

Live demo

Answer 2

如果你需要它，这是一个很好的做法。这也是一个很好的做法，因为它们是有道理的，所以未来的编码员可以理解你在做什么。

但一般来说，将10个类名附加到对象上并不是一个好习惯，因为很可能无论你使用它们的是什么，你都可以用更少的类来完成同样的事情。可能只有1或2。

为了限定该语句，javascript插件和脚本可能会添加更多的类名来执行它们将要执行的任何操作。例如，Modernizr将5到25个类别的任何地方附加到你的身体标签上，这是有充分理由的。当您使用该库中的一个小部件时，jQuery UI会附加许多类名。