According to CSS principles when we want to implement reusability of styles we should use class attribute and when we know that there is an unique element in whole DOM structure we should use id attribute to that Element and then specify a style.
根据CSS原则,当我们想要实现样式的可重用性时,我们应该使用class属性,当我们知道整个DOM结构中有一个唯一元素时,我们应该对该Element使用id属性,然后指定一个样式。
But in this era of Web Applications, DOM structure can be too complex and there is a possibility of duplicate id. Best example would be #title. Its kind of name which can appear anywhere in the document. Now the best part is if I use #title or .title while defining styles (assuming that they have been appeared more than once and have different parent) output which CSS generates is same. This jsfiddle will help you understand what I mean http://jsfiddle.net/dewbot/LGAQD/
但是在这个Web应用程序时代,DOM结构可能过于复杂,并且存在重复ID的可能性。最好的例子是#title。它的名称可以出现在文档的任何位置。现在最好的部分是如果我在定义样式时使用#title或.title(假设它们已经多次出现并具有不同的父级),CSS生成的输出是相同的。这个jsfiddle将帮助你理解我的意思http://jsfiddle.net/dewbot/LGAQD/
I was under impression that just like JS Renderer, CSS Parser halts the iteration when it discovers first #title but it does not happen it keeps on iteration till it reaches EOF just like class. So this arises a question why should we use multiple class and not id?
我的印象是,就像JS Renderer一样,CSS Parser在发现第一个#title时停止了迭代,但它没有发生,它会继续迭代,直到它像类一样到达EOF。所以这就产生了一个问题,为什么我们应该使用多个类而不是id?
4 个解决方案
#1
4
So this arises a question why should we use multiple
classand notid?所以这就产生了一个问题,为什么我们应该使用多个类而不是id?
Because the HTML spec says so, and breaking the rules often results in broken code.
因为HTML规范是这样说的,并且违反规则经常会导致代码损坏。
Does it make sense to identify multiple elements by the same ID? I think not. That's what classes are for: to classify similar elements.
通过相同的ID识别多个元素是否有意义?我想不是。这就是类的用途:对类似的元素进行分类。
Now the best part is if I use
#titleor.titlewhile defining styles (assuming that they have been appeared more than once and have different parent) output which CSS generates is same.现在最好的部分是如果我在定义样式时使用#title或.title(假设它们已经多次出现并具有不同的父级),CSS生成的输出是相同的。
This is natural behavior, and not a bug in any browsers that do this per se. Still, it is not the kind of behavior that you should rely on as it deals with non-conformant markup, which is usually bad.
这是自然行为,而不是任何浏览器中的错误本身。尽管如此,这并不是你应该依赖的行为,因为它处理的是不符合标记的行为,这通常很糟糕。
I was under impression that just like JS Renderer, CSS Parser halts the iteration when it discovers first
#titlebut it does not happen it keeps on iteration till it reaches EOF just likeclass.我的印象是,就像JS Renderer一样,CSS Parser在发现第一个#title时停止了迭代,但它没有发生,它会继续迭代,直到它像类一样到达EOF。
Now this is wrong. CSS parsers do selector matching on a per-element basis: they don't take a rule and walk through the DOM applying it to whatever elements match it; instead, they take each element and attempt to match it against as many rules as possible. Working this way, a parser doesn't know whether an ID is already in use elsewhere in the document, nor does it care. It simply matches according to what the element says it is. This answer covers it in greater detail.
现在这是错的。 CSS解析器基于每个元素进行选择器匹配:它们不接受规则并遍历DOM,将其应用于与其匹配的任何元素;相反,他们采用每个元素并尝试将其与尽可能多的规则相匹配。以这种方式工作,解析器不知道ID是否已经在文档的其他地方使用,也不关心。它根据元素的含义简单匹配。这个答案更详细地介绍了它。
As long as an element has a certain ID, it must match against any ID selectors looking for that specific ID. So, parsers are expected to match any and all elements with a given ID to a single ID selector, even though in HTML it's not correct to have multiple elements with the same ID. In other words, CSS does not enforce the uniqueness of IDs that is required of HTML. This answer explains.
只要元素具有特定ID,它就必须与查找该特定ID的任何ID选择器匹配。因此,期望解析器将具有给定ID的任何和所有元素匹配到单个ID选择器,即使在HTML中,具有相同ID的多个元素也是不正确的。换句话说,CSS不强制HTML所需的ID的唯一性。这个答案解释道。
With all that said, the bottom line is: assign an ID to only one element at a time, and use classes for grouping multiple similar elements. Don't try to be clever and bend the rules.
尽管如此,底线是:一次只为一个元素分配一个ID,并使用类来分组多个相似的元素。不要试图聪明地改变规则。
#2
4
I think you have the parsing of the CSS wrong. The browser doesn't go through the CSS file line for line and applies the styles to the elements in the HTML file, it is the other way around. The browser parses the HTML and whenever it finds a class or id attribute, it looks it up in the CSS files. (This is very simplified, but it helps to get the point).
我认为你解析CSS错了。浏览器没有通过CSS文件行获取行,并将样式应用于HTML文件中的元素,反之亦然。浏览器解析HTML,每当它找到一个class或id属性时,它就会在CSS文件中查找它。 (这是非常简化的,但它有助于明白这一点)。
Just because the browser renders it correctly if you have multiple ids doesn't mean you should do it. The standard clearly says that the id has to be unique.
只是因为如果你有多个ID,浏览器会正确呈现它并不意味着你应该这样做。标准明确指出id必须是唯一的。
#3
1
You have answered it yourself.
你自己回答了。
CSS does apply it to all of the ids and classes it can find. But, JS/ jQuery will implement it to the first it finds.
CSS确实将它应用于它可以找到的所有id和类。但是,JS / jQuery将在它找到的第一个实现它。
So, your question becomes:
那么,你的问题就变成:
Should I apply same ids to many elements for JS manipulation? Answer: Baaaaa....D decision
我是否应该将相同的id应用于JS操作的许多元素?答案:Baaaaa ....决定
Should I apply same id's to many elements for CSS? Answer: still bad, decision! but will implement that rules of yours
我应该为CSS的许多元素应用相同的id吗?答:还不错,决定!但是会实施你的规则
You should also try to use CSS and JS rules applied in hierarchical way, that way, you can never go wrong. Like, #Heading div#Title{css rules here} or $('#Heading div#Titles')...jQuery rules here
您还应该尝试使用以分层方式应用的CSS和JS规则,这样,您永远不会出错。比如,#Heading div#Title {css rules here}或$('#Heading div #Titles')... jQuery规则在这里
Next thing is try to implement ids in a conservative way.
接下来就是尝试以保守的方式实现id。
Then, try to provide unique id for element in your website/app rather than single page. This will save you from multi-page utility Scripts you include in your pages.
然后,尝试在您的网站/应用中为元素提供唯一ID,而不是单页。这将使您免于在页面中包含的多页实用程序脚本。
for example: Heading on the top of the Home page: #Home-Top-Heading
例如:标题在主页的顶部:#Home-Top-Heading
Hope it helps.
希望能帮助到你。
#4
0
your code will not pass validation if you use the same ID on more than one
如果您在多个帐户上使用相同的ID,则代码将不会通过验证
CSS dont care about mutliple id's , javascript cares
CSS不关心mutliple id,javascript关心
#1
4
So this arises a question why should we use multiple
classand notid?所以这就产生了一个问题,为什么我们应该使用多个类而不是id?
Because the HTML spec says so, and breaking the rules often results in broken code.
因为HTML规范是这样说的,并且违反规则经常会导致代码损坏。
Does it make sense to identify multiple elements by the same ID? I think not. That's what classes are for: to classify similar elements.
通过相同的ID识别多个元素是否有意义?我想不是。这就是类的用途:对类似的元素进行分类。
Now the best part is if I use
#titleor.titlewhile defining styles (assuming that they have been appeared more than once and have different parent) output which CSS generates is same.现在最好的部分是如果我在定义样式时使用#title或.title(假设它们已经多次出现并具有不同的父级),CSS生成的输出是相同的。
This is natural behavior, and not a bug in any browsers that do this per se. Still, it is not the kind of behavior that you should rely on as it deals with non-conformant markup, which is usually bad.
这是自然行为,而不是任何浏览器中的错误本身。尽管如此,这并不是你应该依赖的行为,因为它处理的是不符合标记的行为,这通常很糟糕。
I was under impression that just like JS Renderer, CSS Parser halts the iteration when it discovers first
#titlebut it does not happen it keeps on iteration till it reaches EOF just likeclass.我的印象是,就像JS Renderer一样,CSS Parser在发现第一个#title时停止了迭代,但它没有发生,它会继续迭代,直到它像类一样到达EOF。
Now this is wrong. CSS parsers do selector matching on a per-element basis: they don't take a rule and walk through the DOM applying it to whatever elements match it; instead, they take each element and attempt to match it against as many rules as possible. Working this way, a parser doesn't know whether an ID is already in use elsewhere in the document, nor does it care. It simply matches according to what the element says it is. This answer covers it in greater detail.
现在这是错的。 CSS解析器基于每个元素进行选择器匹配:它们不接受规则并遍历DOM,将其应用于与其匹配的任何元素;相反,他们采用每个元素并尝试将其与尽可能多的规则相匹配。以这种方式工作,解析器不知道ID是否已经在文档的其他地方使用,也不关心。它根据元素的含义简单匹配。这个答案更详细地介绍了它。
As long as an element has a certain ID, it must match against any ID selectors looking for that specific ID. So, parsers are expected to match any and all elements with a given ID to a single ID selector, even though in HTML it's not correct to have multiple elements with the same ID. In other words, CSS does not enforce the uniqueness of IDs that is required of HTML. This answer explains.
只要元素具有特定ID,它就必须与查找该特定ID的任何ID选择器匹配。因此,期望解析器将具有给定ID的任何和所有元素匹配到单个ID选择器,即使在HTML中,具有相同ID的多个元素也是不正确的。换句话说,CSS不强制HTML所需的ID的唯一性。这个答案解释道。
With all that said, the bottom line is: assign an ID to only one element at a time, and use classes for grouping multiple similar elements. Don't try to be clever and bend the rules.
尽管如此,底线是:一次只为一个元素分配一个ID,并使用类来分组多个相似的元素。不要试图聪明地改变规则。
#2
4
I think you have the parsing of the CSS wrong. The browser doesn't go through the CSS file line for line and applies the styles to the elements in the HTML file, it is the other way around. The browser parses the HTML and whenever it finds a class or id attribute, it looks it up in the CSS files. (This is very simplified, but it helps to get the point).
我认为你解析CSS错了。浏览器没有通过CSS文件行获取行,并将样式应用于HTML文件中的元素,反之亦然。浏览器解析HTML,每当它找到一个class或id属性时,它就会在CSS文件中查找它。 (这是非常简化的,但它有助于明白这一点)。
Just because the browser renders it correctly if you have multiple ids doesn't mean you should do it. The standard clearly says that the id has to be unique.
只是因为如果你有多个ID,浏览器会正确呈现它并不意味着你应该这样做。标准明确指出id必须是唯一的。
#3
1
You have answered it yourself.
你自己回答了。
CSS does apply it to all of the ids and classes it can find. But, JS/ jQuery will implement it to the first it finds.
CSS确实将它应用于它可以找到的所有id和类。但是,JS / jQuery将在它找到的第一个实现它。
So, your question becomes:
那么,你的问题就变成:
Should I apply same ids to many elements for JS manipulation? Answer: Baaaaa....D decision
我是否应该将相同的id应用于JS操作的许多元素?答案:Baaaaa ....决定
Should I apply same id's to many elements for CSS? Answer: still bad, decision! but will implement that rules of yours
我应该为CSS的许多元素应用相同的id吗?答:还不错,决定!但是会实施你的规则
You should also try to use CSS and JS rules applied in hierarchical way, that way, you can never go wrong. Like, #Heading div#Title{css rules here} or $('#Heading div#Titles')...jQuery rules here
您还应该尝试使用以分层方式应用的CSS和JS规则,这样,您永远不会出错。比如,#Heading div#Title {css rules here}或$('#Heading div #Titles')... jQuery规则在这里
Next thing is try to implement ids in a conservative way.
接下来就是尝试以保守的方式实现id。
Then, try to provide unique id for element in your website/app rather than single page. This will save you from multi-page utility Scripts you include in your pages.
然后,尝试在您的网站/应用中为元素提供唯一ID,而不是单页。这将使您免于在页面中包含的多页实用程序脚本。
for example: Heading on the top of the Home page: #Home-Top-Heading
例如:标题在主页的顶部:#Home-Top-Heading
Hope it helps.
希望能帮助到你。
#4
0
your code will not pass validation if you use the same ID on more than one
如果您在多个帐户上使用相同的ID,则代码将不会通过验证
CSS dont care about mutliple id's , javascript cares
CSS不关心mutliple id,javascript关心