You are right that
According to the HTML4 spec,
The class attribute has several roles in HTML:
* As a style sheet selector (when an author wishes to assign style information to a set of elements).
* For general purpose processing by user agents.
This doesn't explicitly say whether
classes should be used as JS hooks or not (is that "general purpose processing"?).
In the HTML5 spec, all of this language regarding the role of
classes is not there. It simply states that class is, "a set of space-separated tokens representing the various classes that the element belongs to". Then it reports that class can be used as a JS selector using
That said... I do understand your hesitancy to use the
class attribute for the dual purpose of controlling style and behavior. It is not a good thing to try to change how your page looks, only to realize that you also changed its functionality.
To get around this problem, I have seen a couple of different solutions.
classes with a js- prefix. If you do this, it is clear which classes are meant as JS hooks, and which are not.
<input type="text" class="required js-typeahead" name="some-text" />
data-* attributes instead of
class for JS hooks. This also gives you the added benefit that you get a key-value pair for your JS code.
<input type="text" class="required" data-typeahead="typeahead" name="some-text" />
Of course, you can use
data-* attributes for styling, so you don't necessarily get around your separation of style and behavior.