哪种方法更好？CSS类还是ID？

Question

我们考虑下面这两种写同样代码的方式：

方法1

<div id="header">
    <div id="user">
        <a id="userName">Username</a>
        <a id="userImage">Userimage</a>
    </div>
</div>

方法二

<div id="header">
    <div class="user">
        <a class="name">Username</a>
        <a class="image">Userimage</a>
    </div>
</div>

方法一的CSS

#userName { color: white; }
#userImage { height: 50px; width: 50px; }

方法2的CSS

#header div.user a.name { color: white; }
#header div.user a.image { height: 50px; width: 50px; }

在我看来，方法2更加简洁，因为你永远不会得到像userImageInnerBox这样的ID。从技术上讲，哪种方法最好，为什么？

- Shoe

---

听起来你没有理由选择主观/争议性。 - random

请解释CSS中类和ID的区别，并用示例说明。 - random

顺便提一句，如果你使用ID，你可以将它们作为“哈希链接”使用。 - Eric

Answer 1

黄金法则是这样的：对于chrome元素使用id，对于内容元素使用class。因此，方法2更好。

您可以在css-discuss上阅读此文章以获得灵感：http://css-discuss.incutio.com/wiki/Classes_Vs_Ids 没有任何东西会阻止您在唯一的内容元素上使用id属性，而且在某些情况下，它可能是加快javascript DOM遍历的好方法。但是，从样式的角度来看，许多人认为这是不好的实践。

要考虑的主要要点如下：

1. 类可用于多重继承，id必须是唯一的
2. 如果需要将继承与id样式配对使用，则选择器特异性可能会变成一场噩梦

每当我在非chrome元素上使用id属性时，这纯粹是为了快速访问javascript，并且从不用于样式。

- Martin Jespersen

---

“Chrome”元素指的是装饰元素吗？ - Shoe

这里可以找到Chrome的定义：https://dev59.com/-2445IYBdhLWcg3wBl2J#5072092。 - Martin Jespersen

Answer 2

如果您确定页面上只有一个元素，可以使用第一种方法。我更喜欢第二种方法，因为我经常会重复使用我的样式，并且主要使用ID来布置元素（标题、页脚等）。不过我会尽可能地限制选择器的范围，所以如果我能像这样寻址`.name`：

#header .name {
}

我会使用那个代替你的选择器。

- jeroen

Answer 3

就我个人而言，我认为最好的方法是第二种，也就是创建类。

- methyl

---

为什么？有哪些利弊呢？ - Shoe

这只是更清晰简洁，没有技术上的区别。 - methyl

某物如何在没有技术差异的情况下变得更加清洁？这一定有一些原因导致了它的清洁。 - ggorlen

Answer 4

我更喜欢两种方法的混合，即使用方法1的类名而非ID。

单独使用方法2也可以，但我认为这可能会导致CSS代码在后期膨胀，特别是如果您打算继续为其他元素使用通用类名如name和image。

- Loktar

Answer 5

你应该为唯一的元素使用ID，而对于多次使用的元素则应该使用类。这就是你需要的，类。

- Andrei Duma

Answer 6

如果只有一个元素user或userName，则最好使用ID。它的CSS选择器将更有效。如果需要在JavaScript中选择它以供使用，则同样适用。

当可能有多个要以相同方式进行样式设置的元素时，应使用类（Class）。

- Adam