difference between using MULTIPLE 'id' and 'class' attributes in HTML and CSS

问题

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.

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/

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?

回答1:

So this arises a question why should we use multiple class and not id?

Because the HTML spec says so, and breaking the rules often results in broken code.

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.

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 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 #title but it does not happen it keeps on iteration till it reaches EOF just like class.

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.

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.

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.

回答2:

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

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.

回答3:

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.

So, your question becomes:

Should I apply same ids to many elements for JS manipulation? Answer: Baaaaa....D decision

Should I apply same id's to many elements for CSS? Answer: still bad, decision! but will implement that rules of yours

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

Next thing is try to implement ids in a conservative way.

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.

for example: Heading on the top of the Home page: #Home-Top-Heading

Hope it helps.