USO DE CLASS E ID EN CSS

CSS: Sobre IDs y clases

imagen.fuente:compusmvp

Algo que siempre causa alguna confusión cuando escribimos CSS es determinar si debemos aplicar esas definiciones como clases o IDs ¿Cuál es la diferencia?

Tanto una como otra sirven para identificar una etiqueta y, de ese modo, nos resulta más sencillo agregarle propiedades. Por ejemplo:

<style>

  #nombreID {color: red;}

  .nombreClase {color: blue;}

</style>

<div id="nombreID"> este texto será rojo </div>

<div class="nombreClase"> este texto será azul </div>

Para definir las propiedades de un ID le anteponemos el símbolo # al nombre y para definir una clase, usamos un punto.

Una regla elemental y que no debe violarse dice que sólo usaremos un ID si esa etiqueta es única, no debería haber dos etiquetas con el mismo ID en la misma página; en cambio, usaremos class si es un estilo que repetiremos en diferentes etiquetas.

Además, suele decirse que el atributo ID se utiliza para definir áreas específicas de una página (el header, el footer, un menú, etc) y una clase se usa para definir estilos de tipo general (enlaces, listas, etc).

Los ID nos permiten organizar el estilo e identificar etiquetas para luego manipularlas con JavaScript. Las clases, nos evitan escribir códigos repetidos y esa es su mayor utilidad.

Hay varias formas de implementarlas:
a.green {color: green;}
hará que los enlaces que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo NO será de color verde </p>

En cambio, esta otra:
.green {color: green;}
hará que cualquier etiqueta que contengan esa clase, se muestren de color verde:
<a class="green"> el enlace será de color verde </a>
<p class="green"> este párrafo también será de color verde </p>

El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algún documento. ID contrasta con el atributo STYLE en que el primero permite estilos específicos al medio y también puede aplicarse a múltiples documentos (aunque sólo uno en cada documento).

cuándo hay que usar clases y cuándo IDs

La regla más importante a la hora de elegir entre clases e ID’s es que un ID sólo debe ser usado una vez en el documento. 

Es decir, una vez que asignamos un ID a un elemento no se puede volver a asignar a otro elemento de la misma página. ¡Ojo! Cuando hablamos de página nos referimos a la página que se está cargando actualmente en el navegador, no al sitio completo.
Las clases, en cambio, las podemos usar las veces que queramos dentro del mismo documento. Así es que, si hay una serie de propiedades comunes entre una serie de elementos de la misma página lo apropiado será usar clases. Si dentro de esos elementos hay uno que queremos destacar de una manera especial una única vez en la página, entonces usaremos un ID. 

video

Bibliografías:

http://www.campusmvp.es/recursos/post/clases-ids-css-cuando-como-usarlas.aspx
http://vagabundia.blogspot.com/2009/04/css-sobre-ids-y-clases.html