Diferencia entre ID y CLASS en CSS usando a Bob Esponja

  Un paso al que todo mundo llega cuando aprende a escribir código HTML junto con CSS u hojas de estilo es el de decidir que es lo que nos conviene más usar, una clase o identificador para agregar estilos a nuestros elementos.

En este pequeño tutorial vamos a ver las diferencias entre usar la propiedad CLASS e ID en un elemento HTML con ayuda de Bob Esponja, para hacerlo un poco más entretenido, así como también verlo desde el punto de vista de CSS, espero les guste y les sea de ayuda para comprende un poco más esto.

Entonces, primero lo primero, como saben, cada elemento HTML tiene la propiedad id y class, ambas sirven para poder aplicar estilos CSS (‘#’ para nombrar in id, y ‘.’ para nombrar una clase), sin embargo por lo mismo no mucha gente conoce la diferencia entre ellas, y aunque a nivel visual no afecta en nada, si es una regla de ‘etiqueta’ por así decirlo aprender a usarlas bien.

EJEMPLIFICACIÓN

Imagínense que Bob Esponja es un elemento HTML cualquiera, como una capa, al cuál le vamos a asignar un estilo llamado #bob, sabemos que si queremos aplicar el estilo como identificador usamos el ‘#’ al principio en la hoja de estilos, y en el elemento HTML ‘id’, con lo que quedaría así:

CSS:
#bob{ background-color: yellow brown white blue; height:50px; width:50px; }

HTML:
<div id=”bob”></div>

Como vemos en el estilo definimos un color de fondo amarillo y un ancho y altura iguales, puesto que Bob es cuadrado. Ahora, queremos definir otro estilo para otro personaje, por ejemplo a Patricio, creando una regla llamada #patricio y asignándolo también a un elemento cualquiera (div de nuevo):

CSS:
#patricio{ background-color: pink green; height:100px; width:75px; }

HTML:
<div id=”patricio”></div>

De igual forma, este elemento tiene propiedades diferentes a las de Bob como altura y color, pero aún hay más. Si quisiéramos por ejemplo crear unas 9 Cangreburger, podríamos hacer el siguiente código, y es aquí donde vamos a ver el truco de todo esto:

CSS:
.cangreburger{ background-color: brown green red yellow; height:30px; width:40px; }

HTML:
<div class=”cangreburger”></div><div class=”cangreburger”></div>
<div class=”cangreburger”></div><div class=”cangreburger”></div>
<div class=”cangreburger”></div><div class=”cangreburger”></div>
<div class=”cangreburger”></div><div class=”cangreburger”></div>
<div class=”cangreburger”></div>

EXPLICACIÓN

Creo que hasta este punto ya es lógica la diferencia, no se puede usar ID para declarar a muchos elementos, ID se usa para aplicar un estilo a un único elemento diferente de los demás. No podemos aplicar el estilo de #bob o #patricio a otras capas porque sólo hay un Bob Esponja y un Patricio Estrella (aunque en la televisión se dupliquen), también podríamos aplicarlo a que sólo hay un Calamardo, un Don Cangrejo o un Plancton, por mencionar algunos personajes que se destacan en la caricatura.

Sin embargo podemos aplicar una clase a muchos elementos porque CLASS sirve para aplicar estilos a diversos elementos, puesto que las propiedades no perteneces a un único elemento. Por ejemplo la Cangreburger, no sólo existe una, existen miles, lo mismo podrían ser burbujas, peces, edificios, etc., todos estos elementos pueden ser muchos y ser aplicados por un mismo estilo.

Entonces quizá se pregunten dónde usar en la vida real estas propiedades. ID lo podemos usar para aplicar estilos a elementos donde no pueden haber más de esos, por ejemplo a capas para la estructura de un sitio, hay una capa que sirve de header, de contenido, de footer, ellos tendrán sus propios estilos y no pueden usar uno mismo porque no tienen las mismas propiedades. En cambio CLASS la podemos usar para links, imágenes, formularios, para color de texto, tamaño, etc., porque un mismo estilo lo vamos a querer aplicar a muchas imágenes, o el color de texto a varios párrafos, no sólo a uno.

Espero que después de esto haya quedado entendido cuál es la diferencia de usar ID y CLASS en HTML.

¿Qué te pareció este post?