哪种方法更好？ CSS类或ID？

Question

让我们考虑这两种编写相同代码的方法：

方法1

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

方法2

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

方法1的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。从技术上讲，哪种方法最好，为什么？

Answer 1

黄金规则如下：对{chrome}元素使用id，对内容元素使用class。所以方法2更好。

您可以阅读本文关于css-discuss的灵感：http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

没有什么可以阻止您在唯一内容元素上使用id属性，并且在某些情况下，它可以是加速javascript DOM遍历的好方法。然而，出于造型目的，它被许多人认为是不好的做法。

要考虑的要点是：

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

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

Answer 2

如果您确定页面上只有一个元素，则可以使用方法1.

我更喜欢方法2，因为我总是重新使用我的样式，我主要使用ID作为布局元素（页眉，页脚等）。

我会尝试尽可能地限制选择器，所以如果我可以解决.name之类的问题：

#header .name {
}

我会使用它而不是你的选择器。

Answer 3

我个人认为最好的方法是第二种，即创建了类。

Answer 4

我更喜欢两种方法的混合，即方法1的名称，而不是ID。

方法二本身没问题，但我认为这可能导致后来的css膨胀，特别是如果你打算继续使用名称和图像这样的通用类作为其他元素。

Answer 5

您应该将ID用于您使用次数较多的元素的唯一元素和类。这就是你需要的课程。

Answer 6

如果只有一个元素user或userName，则ID更好。它的CSS选择器将更有效。如果您需要选择它以在JavaScript中使用，也会如此。

当可能存在多个应该以相同方式设置样式的元素时，应该使用类。