css选择器用id还是class

Question

求问大家，制作整站页面的时候，头部，导航栏用id还是class好？
一般一个页面对应一个css文件还是多个页面对应一个css文件？

Answer 1

一个大模块外面整体可以用一个id，相同部分的样式都用class，如果你的多个页面内容结构样式大多相似，可以用一个css，如果差别很大，就用不同的css文件，根据实际情况考虑

Answer 2

使用 id 是为了确保唯一性，使用 class 是为了复用，职能不同。
并且，用了 id 不代表就不能用 class，反之亦然。
考虑如下代码：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

如果需要 css 来控制样式的话，一般考虑的是给 ul 加个 class，如下：

<ul class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这样 css 里面就可以选取到了：

.list{}
.list li{}

但如果你有很多个这样的 ul，其中一个与 js 紧密联系，需要做很多操作，一般会考虑给他再加个 id，就像这样：

<ul id="special" class="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

这样使用 js 去取他就比较方便：

var elem = document.getElemnetById('special');

有时候某个单一 li 与其他的 li 样式不同，可以给他添加某些的 class，如果某个 li 都是代表某个特殊的存在，比如带有流水号或者其他什么东西，再给他加上 id 标注（或者 data-*），比如：

<ul id="special" class="list">
    <li id="item_dfsva" data-param="1" class="todo">1</li>
    <li id="item_btwtb" data-param="5" class="done">2</li>
    <li id="item_ht3he" data-param="8" class="reject">3</li>
    <li id="item_btgrw" data-param="2">4</li>
    <li id="item_r1gbm" data-param="3">5</li>
</ul>

那么你可以给他们加某些特殊的样式

.list li{}
.list li.todo{}
.list li.done{}
.list li.reject{}

以及对其进行不同的 js 处理：

var elem = document.getElemnetById('special'),
items = elem.getElementsByTagName('li');
[].forEach.call(items, function(item){
    var param = item.dataset.param,
    id = item.getAttribute('id'),
    classes = item.classList;
    if(classes.contains('todo')){}
    if(classes.contains('done')){}
    if(classes.contains('reject')){}
});

总而言之，使用 id 还是 class，并不是一成不变的，需要根据实际情况综合考虑应用。

PS：很多人说尽量少用 id，多用 class，这种说法不敢苟同，该用什么的时候，就要用什么。不管是 js 查找 DOM 结点还是 css 选择器，查找一个 class 和 查找一个 id 的开销都是不一样的。当然纯粹的样式布局，全使用 class 问题不大，如果涉及到 js 交互操作，性能差别就不一样了。另外，即便在样式布局中，id 选择器的权重比 class 要大得多，这种差异很多时候可以拿来避免过多的 class 选择器层叠。

Answer 3

要控制样式一般用class，
如果是js处理DOM建议用id。

Answer 4

多用class，少用id

Answer 5

其实大家比较喜欢用class选择器的原因，就是因为它多多少少有面向对象编程的概念，写css样式的时候比较舒服。
比如这样，

a .top-link {
    color: #660066;
}

而id选择器呢，

a #top-link {
    color: #660066;
}

你会选哪个呢？

就像HTML5中，<article>和<div>的区别一样，重点是职能逻辑的差异，但是终究还是使用者怎么舒服怎么来的吧。

Answer 6

用class，

Answer 7

建议使用class

Answer 8

第一id可以 不过不推荐 第二class主要可以用类似于extend写法 class1 class2
第三class不是最优解 属性选择器被你吃啦

Answer 9

1、如果在一个地方用到一个样式的时候，可以采用id；
如果在多个地方用到同一个样式，建议用class；
2、像在做整站多个页面的时候，导航栏，头部，底部样式一致的选择class，页面简单的时候选择采取一个css文件即可，如果差别很大，就用不同的css文件，根据实际情况考虑。

Answer 10

我基本不用id

如果是用jQuery的话，把id写在class里面并没有降低识别性，但是少写个id=""，显得更简洁些。
比如，id="test"，我宁可写成 class="id-test"。

尽量使用class的原因是，简洁、复用性强。

Answer 11

class