Better HTML-annotation practice for an element that is a member of multiple classes

This isn't quite the same question as many others that it might resemble.

Consider a table full of sortable column开发者_高级运维s. The ascending/descending sort order that the visitor wants is kept in a <span> in the column's <th>. JavaScript code refers to that <span> when the user calls for a sort; and the code changes the contents of the <span> as the user toggles the sort order.

Considering both the code and the HTML, is it "better" (cleaner, JS-friendlier, more concise, nicer-looking) practice to annotate the <span> part of the <th> this way:

<span class="sortorder"><span class="ascending">content</span></span>

or this way:

<span class="sortorder ascending">content</span>

The first way makes it easier for code to track down the column's sort order. The second way rids the HTML of a lot of cruft. As it seems to me.

Thanks!

It seems like what you're trying to do is to add a key=value pair to the element that says "the sortorder of this is 'ascending'". For this I'd use HTML5 data attributes:

<span data-sort-order="ascending">…</span>

They should be backwards-compatible and jQuery should be able to find / read them on any browser they support using .data().