如果我总是使用CSS类而不是CSS ID,那么有什么优点和缺点吗？

Question

在CSS中,我们可以使用ID和类.如果我在语义,Web标准-W3C,SEO,可访问性和未来可维护性方面使用Class总是ID而有什么优缺点？

Answer 1

一个很大的区别:在CSS中,类的重要性级别低于ID.

想象一下,CSS声明中的每个规范都为该声明的值添加了一定数量的点.让我们说这些点是这样的(完全弥补,但无论如何):

• 标记名称('a','div','span'):1分
• 班级名称('.highlight','.error','.animal'):10分
• ID('#main-headline','#nav','#content'):100分

那么,以下声明:

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

分别值1,11和111分.对于给定的标记,具有与其匹配的最高点数的声明"获胜".因此,例如,与这些声明,所有的一个标签将是蓝色的,除非他们的"亮点"类的元素,在这种情况下,他们会是绿色的内,除非该元素是id为元素中"导航",在这种情况下,他们会变红.

现在,如果你只使用课程,你可以让自己陷入棘手的境地.假设您要将内容区域中的所有链接设为蓝色,但foo区域中的所有链接都是红色的:

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

根据我之前的(弥补)规模,这些都有11分.如果你的内容中有foo,哪一个获胜？在这种情况下,foo因为它之后获胜而获胜.现在,也许这就是你想要的,但那很幸运.如果你以后改变主意,并希望内容获胜,你必须改变他们的顺序,并且根据CSS文件中的声明顺序是一个坏主意.现在,如果您有以下声明:

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

内容总是会赢,因为该声明的值为101(击败foo的11).无论他们进入什么样的顺序,内容声明总是会胜过foo.这为您提供了一些非常重要的一致性.获胜者不会根据文件中的更改顺序任意更改,如果您想更改获胜者,则必须更改声明(可能在.foo声明前添加#content,因此它将具有111点).

所以基本上,值的差异很重要,如果你只是使用类,你会得到很多不一致和看似任意的赢家.