在单个 HTML 元素上使用多个类

Question

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

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

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

- Andrius

---

请参考：https://dev59.com/P2855IYBdhLWcg3wbjnO - tymeJV

Answer 1

简短回答

是的。

---

解释

这是一个很好的实践，因为一个元素可以是不同组的一部分，您可能希望特定元素成为多个组的一部分。在HTML5中，元素可以拥有无限数量的类，而在HTML4中，您受到特定长度的限制。

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

第一个类使文本颜色红色。

第二个类使背景颜色蓝色。

请注意，具有多个类的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>

实时演示

- Jeff Noel

---

好的回答 - 格式很好 :) - Atrox111

@relic180 行为将保持不变：CSS语句将会堆叠在一起。 - Jeff Noel

@relic180 所提出的问题是“在 HTML 元素上使用多个类是否是一种好的实践”。答案是“是的”。这也是有效的，并符合 W3c 规范。其余的答案基于个人意见，而且违反了 SO 的指南，所以我不会进入问题/答案的具体“我认为你应该这样做或那样做”的部分。 - Jeff Noel

@relic180 我编辑了第一段，提到了类属性的长度，从而回答了有关类数量的问题。但我明白你的意思，尽管对于这个问题来说，一个好的答案无法用不可否认的事实来阐述。 - Jeff Noel

晚了点留言，但我想指出，如果在class2上添加color:green，无论你的CSS文件顺序如何（从上到下），最后应用的样式都是最后一个。例如，class 2。 http://i.imgur.com/f2q19Dl.png - Vincent Tang

Answer 2

如果有需要，使用多个类名是一个不错的做法。但如果它们没有明确的意义，那么将十个类名附加到一个对象上并不是一个好习惯，因为很可能你可以使用更少的类名来完成相同的事情，也许只需要1或2个。

需要说明的是，javascript插件和脚本可能会附加更多的类名以执行它们要做的事情。例如，Modernizr（现代浏览器能力检测库）将5-25个类名附加到您的body标签中，这是有很好的理由的。使用jQuery UI库中的任何小部件时，它都会附加大量的类名。

- relic