有什么利弊如果我总是使用CSS类代替CSS ID的一切吗？ [英] Is there any pros and cons if i use always CSS Class instead CSS ID for everything?

问题描述

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

解决方案

想象一下，CSS声明中的每个规范都添加了一定数量的指向声明的价值。让我们说点是这样的（完全组成，但无论如何）：

• 标签名称（'a'，'div' 跨度）：1点


• 类名（'.highlight'，'.error'，'。动物'）：10分


• ID（'＃主标题，#nav'，'＃内容）：100分

所以，下面的声明：

  a {
 color：＃00f; 
} 
 
。高亮显示一个{
颜色：＃0f0; 
} 
 
 #nav .highlight a {
 color：＃f00; 
} 
  

分别值为1,11和111点。对于给定的标签，与其匹配的点数最多的声明wins。例如，对于这些声明，所有 a 标签都将是蓝色的，除非它们在一个具有highlight类的元素内，在这种情况下，它们将是绿色的，除非该元素在内部具有id =nav的元素，在这种情况下它们将是红色的。

现在，如果你只使用类，你可能会遇到棘手的情况。假设您想让内容区域中的所有链接都显示为蓝色，但您的foo区域中的所有链接都是红色的：

 。内容a {
 color：＃00f; 
} 
 
 .foo a {
 color：＃f00; 
} 
  

根据我以前的（合成）如果你有一个foo在你的内容，哪一个赢？在这种情况下，foo胜利，因为它来了。现在，也许这是你想要的，但这只是幸运。如果你以后改变主意，想要获得内容，你必须改变他们的顺序，根据CSS文件中声明的顺序是一个坏主意。现在，如果你有以下声明：

  #content a {
 color：＃00f; 
} 
 
 .foo a {
 color：＃f00; 
} 
  

内容总是胜利，因为该声明的值为101（beating foo 11）。无论他们进入什么顺序，内容宣告总是会击败foo一个。这为您提供了一些非常重要的一致性。获奖者将不能随意改变的基础上更改文件中的命令，如果你想改变的赢家，你必须改变的声明（也许添加＃内容中包含.foo声明的前面，所以将有111点）。

所以基本上，价值观的差异是重要的，你得到了很多矛盾和看似随意的获奖者，如果你只是使用类。

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?

解决方案

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

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):

• Tag name ('a', 'div', 'span'): 1 point
• Class name ('.highlight', '.error', '.animal'): 10 points
• ID ('#main-headline', '#nav', '#content'): 100 points

So, the following declarations:

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

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

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.

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;
}

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;
}

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屋！