Game Development Reference
In-Depth Information
Note
While the official specification states that you should always use the most appro-
priate attribute to store data in a DOM element, you should also keep in mind that
the line that separates a possible
custom data
attribute and some other exist-
ing attribute may at times become gray. When this happens, you should prioritize
your specific needs and goals.
For example, if you are trying to use a
custom data
attribute to name a group of
related elements, the question might arise that a simple CSS class can achieve
the same result. Some people might argue that since CSS classes already exist
and their purpose is to group related elements, others may also argue that if no
specific style is shared among these elements, then use of such a custom data
attribute is well justified. However, the overruling factor should be the specific ap-
plication goals and needs, so if, for example, adding a symbolic CSS class to
group these elements would make it confusing, since no real corresponding CSS
class exists, then the use of the custom data attribute is indeed well justified.
<section class="tracks">
<div class="track">
<span data-name="badGuy"
data-speed="0"></span>
</div>
<div class="track">
<span data-name="goodGuy"
data-speed="0"></span>
</div>
</section>
Note that each span element inside the
div.track
element has both, a data attrib-
ute of name, which distinguishes the hero player from the enemy player, and a data
attribute of speed, which specifies how much each element moves by on each tick of
the game timer. Whether that number represents pixels, percentages, or any other
unit is irrelevant, since both players have the value set to zero, meaning that they
move nothing per timer cycle.
