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

Question

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?

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