css - 如果我总是使用 CSS Class 而不是 CSS ID 来处理所有内容，有什么优点和缺点吗？

Question

在 CSS 中我们可以同时使用 ID 和类。如果我在语义、Web 标准 - W3C、SEO、可访问性和 future 可维护性方面始终使用 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 分。对于给定的标签，与它匹配的点数最高的声明“获胜”。因此，例如，对于这些声明，所有 a 标签都将为蓝色，除非它们位于具有“highlight”类的元素内，在这种情况下它们将为绿色，除非该元素位于内部id="nav"的元素，在这种情况下它们将是红色的。

现在，如果您只使用类，您可能会陷入棘手的境地。假设您想将内容区域中的所有链接设为蓝色，而 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点)。

所以基本上，值(value)观的差异很重要，如果你只使用类，你会得到很多不一致和看似武断的赢家。