Digamos que tengo el siguiente código:

Html:

<div class="myclass1">some text</div>

Css:

.myclass1 { color: red; }

Jquery:

$('.myclass1').text();

Ahora es simple, pero cuando el código se hace más grande, me resulta difícil distinguir entre las clases utilizadas solo para CSS y otras clases utilizadas solo para jQuery. Por ejemplo:

<div class="myclass1 myclass2 myclass3 myclass4 myclass5">some text</div>

Ahora, cuando miro el div con muchas clases, no es fácil saber qué clases se usan solo para CSS, cuáles se usan solo para jQuery y cuáles se usan tanto para CSS como para jQuery.

La pregunta: ¿Ya existen enfoques para evitar este problema? ¿O simplemente estoy pensando demasiado en ello?

Estoy pensando en nombrar mis clases en función del uso, por lo que, por ejemplo, las clases utilizadas para CSS solo se nombrarían como "css_myclass1", las clases utilizadas para jQuery solo se nombrarían como "jq_myclass2" y las clases utilizadas para ambos se nombrarían como "cssjq_myclass3".


NOTA : Sé que las respuestas pueden estar basadas en opiniones, pero necesito saber cuáles son los diferentes enfoques que podrían usarse, especialmente porque estoy a punto de comenzar un gran proyecto en el que este simple problema podría convertirse en una pesadilla-código-complejidad muy rápidamente!

3
evilReiko 4 ene. 2017 a las 14:29

5 respuestas

La mejor respuesta

No hay una forma integrada de distinguir las clases reservadas para las hojas de estilo y las clases reservadas para los scripts, porque no existe tal distinción en primer lugar. El atributo de clase contiene uno o más nombres de clase, que pueden usarse para cualquier número de propósitos. El hecho de que anticipe que algunos de sus nombres de clase se usarán en varios lugares solo sirve para avanzar en el punto. No hay ninguna razón para que un nombre de clase dado en un elemento dado deba reservarse para una hoja de estilo o un script o cualquier otro uso singular.

Si realmente debe mantener sus clases de estilo y script separadas, tendrá que espaciarlas usted mismo.

3
BoltClock 4 ene. 2017 a las 11:34

Como dijiste, no hay correcto o incorrecto. Dicho esto, podrías, p. use el data attribute (jQuery data()) para cosas relacionadas con jQuery y use clases solo para estilo CSS.

1
VGD 4 ene. 2017 a las 11:34

Creo que usar ID sobre class es útil para distinguir la diferencia entre aquellos elementos que no usan JavaScript que los que sí lo están.

Por lo tanto, generalmente solo agrego un ID a los elementos que se usan en JavaScript o jQuery , y dejo los class es para CSS lado de las cosas.

0
GROVER. 4 ene. 2017 a las 11:47

Una sugerencia podría ser usar clases para CSS y atributos de datos para JavaScript:

Html:

<div class="myclass1" data-value="some">some text</div>

Css:

.myclass1 { color: red; }

Jquery:

$('[data-value="some"]').text();
1
Alvaro 4 ene. 2017 a las 23:15

Utilizamos el enfoque con clases de nomenclatura que son para Javascript y jQuery y no deberían ser para diseñar con el prefijo "js-". Y las clases de diseño son bastante normales sin prefijo.

Últimamente intentamos cambiar para usar atributos de datos para problemas de jQuery que no tienen estilo.

5
Martin Wunderlich 4 ene. 2017 a las 11:39