CSS: Sobre IDs y clases

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>

Tanto las clases como los IDs pueden combinarse asi que no es extraño ver cosas como estas:

<div id="unNombre" class="unaClase"> ....... </div>

o bien:

<div class="unaClase otraClase"> ....... </div>

¿Para qué usamos ID y class juntas? Por ejemplo:

<style>
  .ejemploCSS {
    background-color: #000;
    border: 1px solid #CCC;
    float: left;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    width: 150px;
  }
  #ejemploCSS1 {color: white;}
  #ejemploCSS2 {color: yellow;}
  #ejemploCSS3 {color: red;}
</style>

Tenemos una clase donde hemos definido una serie de propiedades como fondo, bordes y tamaño que aplicaremos a un DIV así que, si colocamos tres, uno al lado del otro, se verán iguales. Ahora bien, le agregaremos un ID a cada uno de ellos para darles una propiedad exclusiva, el color del texto:

<div id="ejemploCSS1" class="ejemploCSS"> ... </div>
<div id="ejemploCSS2" class="ejemploCSS"> ... </div>
<div id="ejemploCSS3" class="ejemploCSS"> ... </div>

Se vería esto:

BLANCO

AMARILLO

ROJO

¿Y qué pasa si hay propiedades contradictorias? Por ejemplo, definimos el color de fondo tanto en la clase como en el ID ¿Cuál se verá? ¿será negro como dice la clase o variará como dicen los IDs?:

<style>
  .ejemploCSS {background-color: #000;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

Como se ve, el fondo será el del ID y el de la clase será ignorado.

BLANCO

AMARILLO

ROJO

Claro, uno puede decir, lo que ocurre es que, primero le decimos que es negro y luego le decimos que es de otro color, lo sobrescribimos, es lógico pero, veamos si lo escribimos al revés:

<style>
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
  .ejemploCSS {background-color: #000;}
</style>

Ahora ponemos el fondo negro al final ¿qué se verá?

BLANCO

AMARILLO

ROJO

Pués, lo mismo ya que, para decirlo de alguna manera, un ID es "más importante" que una clase (más información). Para hacer que una clase "sobrescriba" una propiedad de un ID, le agregamos la palabra !important:

<style>
  .ejemploCSS {background-color: #000 !important;}
  #ejemploCSS1 {background-color: white;}
  #ejemploCSS2 {background-color: yellow;}
  #ejemploCSS3 {background-color: red;}
</style>

BLANCO

AMARILLO

ROJO