Práctica recomendada para la denominación de clase CSS para usar con los selectores jQuery

Question

Al crear una aplicación web con alto contenido de Javascript, ¿cuál es la mejor práctica para nombrar clases CSS para mantener el código JavaScript y las hojas de estilos CSS limpios y la estructura de IU flexible?

---

Opción 1: Nombre 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:

• Al seleccionar un elemento para el peinado o la manipulación JS es fácil

Contras:

• nombres de los elementos comienzan a ser real Y largo y difícil seguir la pista de
• Cambio de la estructura HTML requiere porciones de cambio de nombre

---

Opción 2: Nombre cada elemento semánticamente, 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:

• nombres siente más natural, y los nombres son cortas y claras

Contras:

• Selección de un elemento para styl ING o la manipulación es difícil de manejar
• Cambio de la estructura HTML requiere cambiar una gran cantidad de selectores, ya que los nombres están ligados a la estructura jerárquica

---

Opción 3 ... n: Un poco de 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 el cambio de la estructura HTML de los elementos existentes sin demasiadas interrupciones en cualquier otro lugar.

Answer 1

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

Es por eso que me gusta el segundo enfoque.

Sin embargo, para hacerlo más fácil, puede usar SASS, para procesar sus archivos CSS. A continuación, puede no anidando así:

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

Y obtendrá un código similar al segundo ejemplo, sin tener que escribir todo.

En cuanto a los selectores de jQuery, aún sería necesario escribirlos a mano si se quería hacer de esa manera, pero tener selectores complejos como ese a menudo se considera un signo de un mal diseño.

Answer 2

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 selectores de etiquetas funcionará tan bien como poner clases en todo.El HTML en su ejemplo podría más sucintamente ser reescrita como:

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

Y luego serían los selectores de jQuery:

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

(usted podría utilizar etiquetas HTML5 que son más semántica y por lo tanto dependen mucho menos de clases, pero supongo que eso está más allá del alcance de la pregunta.)

Answer 3

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

Algunas situaciones se obtienen mejores resultados mediante la Opción 1, algunos estarán mejor con la opción 2.

suelo ir con "Lo que es el mejor para esta situación específica"

Answer 4

Opción 1: Nombre 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: nombre cada elemento semánticamente, y seleccione los elementos jerárquicamente.

Prefiero este. Al menos sabes el flujo y dónde están las cosas.

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

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

Answer 5

Esa es una muy buena pregunta.Creo que su primera opción (nombre de cada elemento de forma única) es el más adecuado, ya que:

• Las clases de elementos (no nombres) no son tan larga,
• Se hace énfasis en el grupo en su todo de todos modos, por lo que la estructura HTML del grupo no debería cambiar muy a menudo, y
• Los defectos en la estructura de la IU se pueden detectar más fácilmente de esta manera.

Dicho esto, me gustaría utilizar un margen 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 6

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

Para hacer eso, usaría su primer acercamiento (el nombramiento individual permite que las clases CSS se apliquen a cualquier elemento HTML) pero adicionalmente agrega clases con nombre especial para JS. Así no tienes que tener miedo de romper tu JS si eliminan una clase de CSS y viceversa.

Una buena lectura acerca de cómo implementar mejor dicha convención de nomenclatura: 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();