As a rule, it is unwise to bind your CSS and your JS onto the same class in your HTML. This is because doing so means you can’t have (or remove) one without (removing) the other. It is much cleaner, much more transparent, and much more maintainable to bind your JS onto specific classes.
I have known occasions before when trying to refactor some CSS has unwittingly removed JS functionality because the two were tied to each other—it was impossible to have one without the other.
Typically, these are classes that are prepended with js-, for example:
<input type="submit" class="btn js-btn" value="Follow" />
This means that we can have an element elsewhere which can carry with style of .btn {}, but without the behaviour of .js-btn.
data-* Attributes
A common practice is to use data-* attributes as JS hooks, but this is incorrect. data-*attributes, as per the spec, are used to store custom data private to the page or application
(emphasis mine). data-* attributes are designed to store data, not be bound to.
