单个元素html上的多个类[关闭]答案

【问题标题】：multiple classes on single element html [closed]单个元素html上的多个类[关闭]
【发布时间】：2013-06-26 07:53:31
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

简答

是的。

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

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

第一类使文本color 红色。

第二类使background-color 蓝色。

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

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

你可以阅读更多关于CSS Specificity的信息。

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

【讨论】：

很好的答案 - 很好的格式:)
@relic180 行为将保持不变：CSS 语句只会叠加。
@Ghillied 但这不是问题所在。被问到的问题是使用大量类“是不是很糟糕”。不是;有没有可能......或者，它是如何工作的。
@relic180 被问到的问题是在一个 HTML 元素上有多个类是一种好习惯。答案是是的。它也是有效的并且符合 W3c 规范。答案的其余部分是基于意见的，并且违反了 SO 指导方针，所以我不会进入具体的我认为你应该这样做或这部分的问题/答案。
后期评论但只是想指出如果您在 class2 上添加了color:green，那么您的 CSS 文件的顺序（从上到下）是最后应用的样式。例如第 2 课。i.imgur.com/f2q19Dl.png

【解决方案2】：

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

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

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

【讨论】：