Question

使用id设置元素的样式是不好的做法，还是应该为每个引用相应css的元素设置样式？

<div id="test">
</div>

对：

<div id="test" class="testClass">
</div>

#test{
color:blue;
}

.testClass {
color:blue
}

Answer 1

这不是一个坏或好的做法。 id选择器的用途与class不同。

如果您计划仅设置此元素的样式而不在其他任何地方重复使用样式 - id是您的选择。如果你需要很多类似div - s的样式 - 使用class

Answer 2

ID基本上与类相同，ID稍微快一些，但只能在一个元素上使用，而类可以在很多上使用。

Answer 3

id vs class

id #

ID必须在文档中是唯一的，并且通常用于使用document.getElementById检索元素。

在某些文档（特别是HTML，XUL和SVG）中，元素的id可以指定为元素的属性，如下所示：。

但是，如果没有在DOCTYPE中正确指定id属性的类型，则无法在自定义XML文档中使用此属性。

id的其他常见用法包括在使用CSS设置文档样式时使用元素的ID作为选择器。

请注意，ID区分大小写，但您不应创建仅在大小写中不同的ID（请参阅类和ID名称中的大小写敏感度）。

class .

为元素指定一个类名或一组类名。您可以为任意数量的元素分配相同的类名。如果指定多个类名，则必须用空格字符分隔。

元素的类名有两个关键角色：

作为样式表选择器，供作者想要将样式信息分配给一组元素时使用。   供浏览器一般使用。   该类可用于使用CSS设置SVG内容的样式。

Answer 4

如果你想要多个元素的颜色为蓝色，那么你需要使用一个类，否则id很好。

Answer 5

ID是独一无二的。页面上应该只有一个带有该ID的元素。在造型方面，我不认为这是不好的做法，但ID在特异性方面是胜利。基本上，选择器越具体，在涉及冲突的样式时就会给予更多的偏好，因此应用于ID的任何样式都会覆盖任何其他样式。

p has a specificity of 1 (1 HTML selector)
div p has a specificity of 2 (2 HTML selectors; 1+1)
.tree has a specificity of 10 (1 class selector)
div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
#baobab has a specificity of 100 (1 id selector)
body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

Answer 6

这不是一个坏习惯，但这取决于你的用途。

如果为页面中的每个元素设置一些规则，很快就无法理解正在发生的事情，你的css会成为一个非常长的文件。

定义一个类允许多个元素使用同一组规则，因此您应该设计页面以允许这样的行为。

通常，您应该混合策略，例如，您可以使用id来设置页面的一些“重要”元素，例如页眉，页脚，正文等，而其他部分或组件应该使用类对齐。

Answer 7

我不认为，如果你在风格中使用ID或Class，它会产生很大的不同。类选择器用于指定一组元素的样式。与id选择器不同，类选择器最常用于多个元素。

更多参考资料，您可以看到此链接

http://css-tricks.com/the-difference-between-id-and-class/

在JavaScript中，ID起着重要作用。如果您使用ID搜索任何DOM元素，那么搜索将更快，因为JavaScript Parser返回相应页面上具有该ID的第一个元素的值。如果您使用Class，则JS搜索整个页面并使用该类收集所有元素。因为这种搜索变得有点慢。

糟糕的css练习直接用id来设置元素而不是引用css类？

7 个答案: