Is there any major problems you're aware of with this kind of dom
pollution that have a negative impact on ease or performance?
My thoughts:
Firstly: Validate!
But I think that negative impact on whatever isn't the point.
Suppose:
Option 1 - <font size="7"><b>Heading level 1</font></b>
Option 2 - <h1>Heading level 1</h1>
What option should we use?
So, the point goes beyond validation: It's a semantic issue too.
Specs says: http://www.w3.org/TR/REC-html40/struct/links.html#adef-rel
rel attribute: "This attribute describes the relationship from the current
document to the anchor specified by the href attribute"
and says more: http://www.w3.org/TR/REC-html40/index/attributes.html
rel attribute is allowed for A and LINK elements only
-------------------------------------------------------------------------------------------------------
<div class="event-phase" rel="1"></div>
<div class="event-phase" rel="2"></div>
<div class="event-phase" rel="3"></div>
Instead of
<div id="event-phase-1"></div>
<div id="event-phase-2"></div>
<div id="event-phase-3"></div>
I think that 2nd approach is better not only because validades but it is a
easy way to target each element using a counter in the loop.
Something like:
$('.event-phase-' + i)
PS: If you have control over the id name use a shorter one like: evph1,
evph2 etc...
Regards
MaurĂcio
-------------------------------------------------------------------------------------------------------