¿Qué método es mejor? ¿Clases de CSS o ID?

Consideremos estas 2 formas de escribir el mismo código:

Método 1

 

Método 2

  

CSS del Método 1

 #userName { color: white; } #userImage { height: 50px; width: 50px; } 

CSS del Método 2

 #header div.user a.name { color: white; } #header div.user a.image { height: 50px; width: 50px; } 

Me parece que el Método 2 es más limpio, ya que nunca terminarás con ID como userImageInnerBox . Ahora, técnicamente hablando, ¿cuál es el mejor método y por qué?

Las reglas de oro son las siguientes: use id para elementos de cromo, use class para elementos de contenido. Entonces el método 2 es el mejor.

Puede leer este artículo sobre css-discuss para obtener inspiración: http://css-discuss.incutio.com/wiki/Classes_Vs_Ids

No hay nada que le impida usar atributos de id En elementos de contenido únicos, y en algunos casos puede ser una buena forma de acelerar los recorridos de DOM de JavaScript. Para fines de diseño, sin embargo, es considerado por muchos como una mala práctica.

Los principales puntos a considerar son estos:

  1. las clases se pueden usar para la herencia múltiple, el id debe ser único
  2. la especificidad del selector puede convertirse en una pesadilla si necesita usar la herencia emparejada con el estilo de identificación

Cada vez que uso atributos de id En elementos que no son de Chrome, es puramente para acceder rápidamente a JavaScript, y nunca para diseñar.

Si está seguro de que solo tendrá un elemento en la página, puede usar el método 1.

Prefiero el método 2 porque siempre termino reutilizando mis estilos y principalmente uso identificaciones para elementos de diseño (encabezado, pie de página, etc.).

Sin embargo, trataría de limitar el selector tanto como sea posible, así que si puedo abordar el nombre como:

 #header .name { } 

Yo usaría eso en lugar de tu selector.

Personalmente encuentro que el mejor método es el segundo, es decir, se crearon las clases.

Prefiero una combinación de ambos, los nombres del método 1, con clase en lugar de ID.

El método dos en sí mismo está bien, pero creo que podría llevar a la saturación css más adelante, especialmente si tiene la intención de continuar usando clases genéricas como el nombre y la imagen para otros elementos.

Deberías usar ID’s para elementos y clases únicos para los elementos que usas más veces. Eso es lo que necesitas, clases.

Si solo existirá un elemento user o userName entonces ID es mejor. El selector de CSS será más eficiente. Esto también será cierto si necesita seleccionarlo para usar en JavaScript.

La clase debe usarse cuando puede haber más de un elemento que debe ser diseñado de la misma manera.