单个元素html上的多个类

Question

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

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

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

Answer 1

简答

是.

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

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

第一个类使文本color 变为红色.

第二类是background-color 蓝色的.

看看具有多个类的DOM元素将如何表现,它将同时佩戴两个 CSS语句.

结果:不同类中的多个CSS语句将叠加.

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

.class1 {
    color:red;
}

.class2 {
    background-color:blue;
}

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

迟到的评论,但只想指出你是否在class2上添加了`color:green`,无论你的CSS文件所处的顺序(从上到下)是最后一种应用的样式.例如,第2课.http://i.imgur.com/f2q19Dl.png (2认同)

Answer 2

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

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

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