La règle est qu'il n'est pas sage de lier CSS et JavaScript avec les même classes que celles-qui lient HTML & CSS. Cela car en agissant ainsi vous ne pourriez appliquer (ou enlever) uniquement le JavaScript où le CSS en ajoutant (ou enlevant) ladite classe. Il est bien plus propre, plus évident, et bien plus maintenable, de lier votre JavaScript à des classes spécifiques.
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.
Typiquement, ces classes ont le préfixe js-, par exemple :
<input type="submit" class="btn js-btn" value="Follow" />
Cela signifie que nous pouvons avoir un élément ailleurs qui porte le style de .btn {}, mais sans avoir le comportement de .js-btn.
Une pratique commune est d'utiliser les attributs data-* comme des points de liaison JavaScript, mais cela est incorrect. Les attributs data-*, tels que décrits par les spécifications, sont utilisés pour “to store custom data private to the page or application” (l'emphase est de l'auteur). Les attributs data-* sont conçues pour stocker des données, par pour être liées à quoi que ce soit.