哪种方法更好？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更干净,因为你永远不会得到像这样的ID userImageInnerBox.从技术上讲,哪种方法最好,为什么？

Answer 1

黄金规则如下:id用于chrome元素,class用于内容元素.所以方法2更好.

你可以在css-discuss上阅读这篇关于灵感的文章:http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

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

要考虑的要点是:

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

每当我id在非chrome元素上使用属性时,它纯粹是为了快速访问javascript,而不是为了样式.