Clases CSS especiales para comportamientos javascript

Para los ejemplos, vamos a utilizar jQuery, pero la librería no es lo más relevante, si no la manera de referenciar desde javascript a los elementos del DOM.

Hay muchas opciones:

$("ul") CACA

$("#mi-menu"), $(".mi-clase") etc, etc, etc ...

Por nuestra experiencia nos encontramos ante este dilema debido a que varios maquetadores modificaban tanto el DOM como las funciones y selectores jQuery, entonces un maquetador núnca podía saber con toda seguridad si cambiar el nombre o borrar una clase o id que ya no iba a utilizar podía resultar en un error de javascript. 

Al principio, optamos por los nuevos data-* attributes que nos ofrece HTML5 y empezamos a referenciar a los elementos de la siguiente manera:

<div data-attibute="js-selector">

$("[data-attribute='js-selector']").

Pero con este sistema, nos encontramos ante la situación de necesitar dos referencias para acciones javascript sobre el mismo elemento y no podíamos asignar dos valores al mismo data-attibute, así que decidimos utilizar clases, más sencillo, más cómodo a la vista y sencillo de entender y asimilar:

<div class="mi-clase js-selector">

$(".js-selector")