如果我总是使用 CSS 类而不是 CSS ID，是否有任何利弊? [英] Is there any pros and cons if i use always CSS Class instead CSS ID for everything?

问题描述

在 CSS 中，我们可以同时使用 ID 和类.如果我在语义、Web 标准-W3C、SEO、可访问性和未来可维护性方面总是使用 Class 而不是 ID，是否有任何利弊?

In CSS we can use both ID and class. is there any pros and cons if i use Class always instead ID in terms of Semantic, Web standards- W3C , SEO , Accessibility and future maintainability?

推荐答案

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

One big difference: in CSS, a class has a lower importance level than an ID.

想象一下，CSS 声明中的每个规范都向该声明的值添加了一定数量的点.假设这些点是这样的(完全编造，但无论如何):

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

• 标签名称('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" 的元素，在这种情况下它们会是红色的.

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

现在，如果您只使用类，您可能会陷入棘手的境地.假设您要将内容区域中的所有链接设为蓝色，但将 foo 区域中的所有链接设为红色:

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

根据我之前的(编造的)量表，这两个都有 11 分.如果您的内容中有一个 foo ，那么哪一个会赢?在这种情况下， foo 获胜，因为它在后面.现在，也许这就是你想要的，但这只是幸运.如果您稍后改变主意，并希望内容获胜，则必须更改它们的顺序，并且取决于 CSS 文件中声明的顺序是一个坏主意.现在，如果您有以下声明:

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

内容总是会赢，因为该声明的值为 101(超过 foo 的 11).无论它们以什么顺序出现，内容声明总是会击败 foo 的.这为您提供了一些非常重要的一致性.中奖者不会根据文件中的更改顺序而任意更改，如果要更改中奖者，则必须更改声明(可能在 .foo 声明前添加一个#content，这样就会有 111点).

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

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

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes.

这篇关于如果我总是使用 CSS 类而不是 CSS ID，是否有任何利弊?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！