如果我对所有内容始终使用CSS类而不是CSS ID，是否有任何利弊？

甄志

2023-03-14

问题内容：

在CSS中，我们可以同时使用ID和类。如果我在语义，Web标准-W3C，SEO，可访问性和将来的可维护性方面始终使用Class代替ID，那么有什么利弊？

问题答案：

一个很大的不同：在CSS中，类的重要性级别低于ID。

想象一下，CSS声明中的每个规范都为该声明的值添加了一定数量的点。假设要点如下（完全组成，但随便什么）：

因此，以下声明：

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点）。

因此，基本上，值的差异很重要，如果您仅使用类，就会出现很多不一致的地方，并且看起来是任意的赢家。