¿Hay ventajas y desventajas si utilizo siempre CSS Class en lugar de CSS para todo?

En CSS podemos usar ID y clase. ¿Hay ventajas y desventajas si utilizo Class siempre como ID en términos de Semántica, estándares web, W3C, SEO, Accesibilidad y mantenibilidad futura?

Una gran diferencia: en CSS, una clase tiene un nivel de importancia menor que una ID.

Imagine que cada especificación en una statement CSS agrega un cierto número de puntos al valor de esa statement. Digamos que los puntos son algo así (totalmente inventado, pero lo que sea):

  • Nombre de la etiqueta (‘a’, ‘div’, ‘span’): 1 punto
  • Nombre de clase (‘.highlight’, ‘.error’, ‘.animal’): 10 puntos
  • ID (‘# main-headline’, ‘#nav’, ‘#content’): 100 puntos

Entonces, las siguientes declaraciones:

a { color: #00f; } .highlight a { color: #0f0; } #nav .highlight a { color: #f00; } 

valen 1, 11 y 111 puntos (respectivamente). Para una etiqueta determinada, la statement con el mayor número de puntos que coincida con ella “gana”. Entonces, por ejemplo, con esas declaraciones, todas las tags serán azules, a menos que estén dentro de un elemento con la clase “resaltar”, en cuyo caso serán verdes, a menos que ese elemento esté dentro del elemento con id = “nav “, en cuyo caso serán rojos.

Ahora puede meterse en situaciones complicadas si solo usa clases. Digamos que quiere hacer que todos los enlaces en su área de contenido sean azules, pero todos los enlaces en su área foo son rojos:

 .content a { color: #00f; } .foo a { color: #f00; } 

Por mi escala anterior (inventada), esos dos tienen 11 puntos. Si tiene un foo dentro de su contenido, ¿cuál gana? En esta situación, foo gana porque viene después. Ahora, tal vez eso es lo que quieres, pero eso es solo suerte. Si cambia de opinión más adelante y desea que el contenido gane, debe cambiar su orden y, según el orden de las declaraciones en un archivo CSS, es Una mala idea. Ahora si, en cambio, tuvieras la siguiente statement:

 #content a { color: #00f; } .foo a { color: #f00; } 

El contenido siempre ganaría, porque esa statement tiene un valor de 101 (superando a foo’s 11). No importa en qué orden entren, la statement de contenido siempre superará a la de siempre. Esto le proporciona una consistencia muy importante. Los ganadores no cambiarán arbitrariamente en función del cambio de órdenes en el archivo, y si desea cambiar el ganador, debe cambiar las declaraciones (tal vez agregar un # contenido delante de la statement .foo, por lo que tendrá 111 puntos).

Básicamente, las diferencias en los valores son importantes, y obtienes mucha inconsistencia y ganadores aparentemente arbitrarios si solo usas las clases.

Sé que no soy la “norma” aquí y voy a obtener el visto bueno para esto … pero utilizo class’es exclusivamente y solo uso ID para scripting 🙂

Esto crea una clara línea de separación de ajustes y cambios relacionados con el diseñador y el codificador, lo cual es muy útil para nosotros.

También tenemos algunos codificadores .NET de formularios web (aunque estamos moviendo todos los sitios a MVC) y como los controles .NET se apoderan de los identificadores para guiarlos dinámicamente usando ID’s para CSS, es un dolor … no soy fanático de usar # ct00_ct02_MyControlName en archivos css e incluso si hubiera cambios en el código, ¡se puede romper el CSS! Clases funciona EXCELENTE para esto.

Algunas librerías de PHP que otros en la compañía están usando también necesitan usar la asignación dinámica de ID, esto crea el problema aquí también. nuevamente las clases funcionan EXCELENTES aquí.

A medida que más y más de estos resultados y lenguajes dynamics agotan los ID (exactamente para lo que realmente están destinados … identificar un elemento para trabajar con él) puede ser cada vez más complicado trabajar con ID en CSS.

Me parece que todo el mundo quiere usarlos simplemente porque creen que deberían, porque están “ahí”, les ofrezco la idea de que las ID no existen para CSS y su uso en CSS solo está allí como ayuda adicional a través de el selector y su uso real son las secuencias de comandos.

No ha habido una sola instancia en la que haya necesitado una ID para usar CSS o incluso una sola instancia en la que hubiera sido más fácil.

Pero tal vez estoy acostumbrado y ¿por qué? Mi salida HTML es pequeña, mis archivos CSS pequeños y directos. Los elementos nesteds funcionan en todos los navegadores como espero, no tengo problemas y puedo crear páginas complicadas y bien renderizadas. Los cambios toman solo unos minutos ya que puedo aplicar múltiples clases a un elemento o crear uno nuevo.

Identificación para scripting, CLASS para css … funciona bien.

Obviamente no hay un problema importante (incluso en un equipo de diseñadores y codificadores) al usar ambos para CSS, ya que todos nos acostumbramos a lo que nos acostumbramos 🙂 pero la forma en que trabajamos produce los resultados esperados rápidamente, y nadie puede pisa los dedos de los pies de cualquier persona incluso en entornos anónimos de intercambio.

Mi más grande sería desde el punto de vista del mantenimiento futuro. No solo es bueno saber que un estilo solo se usa para un elemento en una página, pero si alguna vez comienzas a javascript integrado en tu página es bueno poder acceder a los elementos rápidamente usando sus ID en lugar de intentar acceder a ellos por su cuenta. clase.

Si está usando una biblioteca de JavaScript decente (como prototype o jQuery), entonces no, no puedo pensar en ninguna razón técnica por la que esto podría importar. Sin embargo, podría ayudar a su propio pensamiento interno y coherencia pensar por separado acerca de si se trata de una característica colectiva similar a un atributo (=> clase) o un elemento específico (=> ID).

Use id cuando un elemento es único en una página y siempre espera que lo sea. Usa la class cuando a múltiples elementos se les asignará el valor del atributo. Es cierto que puede no marcar una gran diferencia desde una perspectiva puramente de CSS, pero desde la perspectiva de JavaScript o Selenium, es importante poder identificar elementos de forma única por su atributo de id .

Ver siguiente:
¿Mejores prácticas de CSS sobre identificación y clase?

Para SEO: No hará absolutamente ninguna diferencia para seo en absoluto.

Debe elegir nombres que reflejen el contenido semántico de esa sección. eg: id = “leftMenu” class = “footerNotes”

No use guiones bajos en su clase y nombres de identificación (error común).

En simple podemos definir identificación y clase como abajo

 ID = A person's Identification (ID) is unique to one person. Class = There are many people in a class. 

Use ID cuando solo hay una ocurrencia por página. Use clases cuando haya una o más ocurrencias por página. No existe una regla rígida sobre cuándo usar ID y cuándo usar Class. Mi sugerencia es utilizar la clase tanto como sea posible para obtener la máxima flexibilidad, con la única excepción de cuando quiera usar la función getElementByID de Javascript, en cuyo caso necesita usar ID.

Los ID son buenos para los elementos a los que se debe acceder desde JavaScript. Pero los ID deben ser únicos en la página según los estándares w3, es decir:

  • no puede tener dos

    en un documento

  • no puede tener un

    y

    en un documento

Los nombres de clase son buenos para los elementos a los que no se necesita acceder desde JavaScript (aunque es posible hacerlo). Un nombre de clase puede usarse para múltiples elementos, y un elemento puede tener más de un nombre de clase asociado. Por lo tanto, los nombres de clase le permiten crear definiciones de CSS más “genéricas”, por ejemplo:

  • – los tres pueden estar en el mismo documento

Puedes mezclar identificadores y clases juntos.

Para resumir: use ID para casos específicos; nombres de clase para casos generics; y clases de cascad para elementos que comparten algunas propiedades generales pero no todas.

La única diferencia entre las clases y los ID, excepto por el hecho de que un ID DEBE ser único y una clase no, es que el navegador puede usar el ID de un elemento para fines de navegación. Por ejemplo, esta página tiene un logotipo con id = “hlogo”. Si agrega a la URL de esta página el hash #hlogo, como este https://stackoverflow.com/questions/1878810/is-there-any-pros-and-cons-if-i-use-always-css-class- en su lugar, css-id-for-everythi # hlogo , el navegador se desplazará automáticamente al logotipo.