html - 单个元素html上的多个类

Question

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

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

我并不是说一个元素上的两个或三个类不好，但是四个、五个甚至六个呢？

Answer 1

简答

是的。

---

解释

这是一个很好的做法，因为一个元素可以是不同组的一部分，并且您可能希望特定元素成为多个组的一部分。在 HTML5 中，该元素可以容纳无限数量的类，而在 HTML4 中，您受到特定长度的限制。

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

第一类使文本color red。

第二课使background-color 蓝色。

看看具有多个类的DOM 元素会如何表现，它会同时使用两个CSS 语句。

结果：不同类中的多个 CSS 语句会堆叠起来。

您可以阅读有关CSS 特异性的更多信息。

---

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>

现场演示

Answer 2

如果您需要它们，这是一个很好的做法。如果它们有意义，这也是一个很好的做法，因此未来的编码人员可以理解您在做什么。

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

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