name - jquery parent

Práctica recomendada para la asignación de nombres de clase CSS para su uso con los selectores jQuery

Question

Al crear una aplicación web pesada para Javascript, ¿cuál es la mejor práctica para nombrar clases CSS para mantener el código Javascript y las hojas de estilo CSS limpias y la estructura de la interfaz de usuario flexible?

Opción 1: Nombra cada elemento de forma única .

Por ejemplo,

// HTML
<div id="list">
<button class="list-delete" />
<div class="list-items">
<div class="item">
<button class="item-delete" />
<h1 class="item-name">Item 1</h1>
</div>
</div>
</div>
// CSS
.list-delete {
color: black;
}
.item-delete {
color: blue;
}
// Javascript
$(".list-delete").show();
$(".item-delete").hide();

Pros:

• Seleccionar un elemento para el estilo o la manipulación de JS es fácil

Contras:

• Los nombres de los elementos comienzan a ser realmente largos y difíciles de seguir.
• Cambiar la estructura HTML requiere muchos cambios de nombre

Opción 2: Asigne un nombre semántico a cada elemento y seleccione los elementos jerárquicamente .

Por ejemplo,

// HTML
<div id="list">
<button class="delete" />
<div class="items">
<div class="item">
<button class="delete" />
<h1 class="name">Item 1</h1>
</div>
</div>
</div>
// CSS
#list > .delete {
color: black;
}
#list > .items > .item > .delete {
color: blue;
}
// Javascript
$("#list > .delete").show();
$("#list > .items > .item > .delete").hide();

Pros:

• Nombrar se siente más natural, y los nombres son cortos y claros

Contras:

• La selección de un elemento para el estilo o la manipulación es difícil de manejar
• Cambiar la estructura HTML requiere cambiar muchos selectores, ya que los nombres están vinculados a una estructura jerárquica

Opción 3 ... n: ¿Algún enfoque híbrido? ¿Un enfoque totalmente diferente?

Tenga en cuenta el problema de la colisión de nombres al agregar más elementos en el futuro, especialmente cuando tiene elementos anidados. Además, la solución ideal facilitaría cambiar la estructura HTML de los elementos existentes sin demasiada interrupción en ningún otro lugar.

Answer 1

Opción 1: Nombra cada elemento de forma única.

Esto es casi imposible y definitivamente no es una buena práctica. Creo que es mejor si puedes usar clases que tengan sentido agrupando estilos y propiedades relevantes.

Opción 2: Asigne un nombre semántico a cada elemento y seleccione los elementos jerárquicamente.

Prefiero éste. Al menos conoces el flujo y dónde están las cosas.

Opción 3 ... n: ¿Algún enfoque híbrido? ¿Un enfoque totalmente diferente?

Siempre hay un enfoque híbrido y un enfoque totalmente diferente. Creo que cada desarrollador tiene su propio estilo de codificación. Si es semánticamente correcto y bien estructurado, ese sería el mejor enfoque.

Answer 2

Esa es una muy buena pregunta. Creo que tu primera opción ( nombra cada elemento de forma única ) es la correcta, porque:

• Las clases de elementos (no nombres) no son tan largas,
• De todos modos, se hace hincapié en el grupo como un todo, por lo que la estructura HTML del grupo no debería cambiar muy a menudo, y
• Los defectos en la estructura de la interfaz de usuario se pueden detectar más fácilmente de esa manera.

Dicho esto, usaría un marcado ligeramente diferente:

<div id="list">
<button class="delete" />
<div class="list-items">
<div class="list-item">
<button class="delete" />
<h1 class="list-item-name">Item 1</h1>
</div>
</div>
</div>

Answer 3

La solución más limpia sería desacoplar todo: HTML - CSS - JS.

Para hacerlo, utilizaría su primer enfoque (la denominación individual permite que las clases CSS se apliquen a cualquier elemento HTML) pero, además, agrega clases con nombre especial para JS. De esta manera, no debes tener miedo de romper tu JS si eliminan una clase CSS y viceversa.

Una buena lectura sobre cómo implementar mejor una convención de nomenclatura de este tipo: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

// HTML
<div id="list">
<button class="list-delete js-list-delete" />
<div class="list-items">
<div class="item">
<button class="item-delete js-item-delete" />
<h1 class="item-name">Item 1</h1>
</div>
</div>
</div>
// CSS
.list-delete {
color: black;
}
.item-delete {
color: blue;
}
// Javascript
$(".js-list-delete").show();
$(".js-item-delete").hide();

Answer 4

Realmente depende de la estructura y el tamaño de su página.

Algunas situaciones funcionarán mejor con la Opción 1, otras serán mejores con la Opción 2.

Normalmente voy con "Lo que sea mejor para este escenario específico"

Answer 5

Recomendaría ser lo más conservador posible al agregar clases e ID a su HTML. En la mayoría de los casos, el uso de ID para las secciones principales del contenido y el uso de los selectores de etiquetas funcionarán tan bien como poner clases en todo. El HTML en su ejemplo podría reescribirse de manera más sucinta como:

<div id="list">
<button class="delete" />
<div class="items">
<div>
<button class="delete" />
<h1>Item 1</h1>
</div>
</div>
</div>

Y entonces los selectores de jQuery serían:

$("#list > .delete").show();
$(".items .delete").hide();

(Podría usar etiquetas HTML5 que son más semánticas y, por lo tanto, dependen incluso menos de las clases, pero supongo que eso está fuera del alcance de la pregunta).

Answer 6

Tratar de lidiar con nombres únicos puede funcionar bien para proyectos pequeños, pero cuanto más grande sea, más probable es que tenga conflictos.

Por eso me gusta el segundo enfoque.

Sin embargo, para que sea más fácil, puede usar SASS para procesar previamente sus archivos css. A continuación, puede hacer la anidación de esta manera:

#list {
.delete {
}
.items {
.item {
}
}
}

Y obtendrá un código similar a su segundo ejemplo, sin tener que escribirlo todo.

En cuanto a los selectores de jQuery, aún tendrían que escribirse a mano si desea hacerlo de esa manera, pero tener selectores complejos como ese a menudo se considera un signo de un mal diseño.