Muchos de nosotros cuando comenzamos con esto del CSS no somos del todo conscientes acerca de las diferencias entre los id’s y las clases. Incluso hasta el día de hoy en ocasiones me pregunto sobre cual debería utilizar.
La diferencia entre ID’s y clases en CSS es bastante notable. En este artículo voy a explicar cuando se debe utilizar una en favor de la otra.
Acerca de los ID’s:
Un ID se define en el código HTML así:
<div id="ejemplo_de_id"> <!-- propiedades... --> </div>
En el archivo CSS podemos localizar el identificador anterior para aplicarle los estilos de la siguiente manera:
#ejemplo_de_id { background: blue; }
- Están definidos por el símbolo de numeral o almohadilla (#), el cual precede al nombre del ID.
- Pueden aparecer una vez sola dentro de la página web.
- Tienen prioridad sobre todos aquellos estilos aplicados a través de una clase.
Sobre las Clases:
Las Clases se aplican en el HTML así:
<div class="ejemplo_de_clase"> <!-- propiedades... --> </div>
Y se definen en el archivo CSS de la siguiente manera:
.ejemplo_de_clase{ background: blue; }
- Están definidas por un punto (.) precediendo al nombre de la clase.
- Pueden ser utilizadas mas de una vez por pagina en cualquier numero de elementos.
- Pueden combinarse varias clases mediante y aplicarlas a un mismo elemento de la pagina:
<div class="clase1 clase2 clase3">
Conclusión
La diferencia principal entre los ID’s y las clases es que un selector de ID puede ser llamado una sola vez dentro de un documento, mientras que un selector de clase puede ser llamado varias veces.
No hay ninguna regla fija sobre cuándo utilizar ID y cuándo utilizar una clase. Mi sugerencia es utilizar las clases tanto como sea posible para obtener máxima flexibilidad, la única excepción es cuando se quiere utilizar la función getElementById de Javascript, en cuyo caso usted necesitaremos indefectiblemente el uso de ID’s.
Los nombres de clase e ID’s distinguen entre mayúsculas y minúsculas. Por ejemplo: .claseuno y .ClaseUno son dos clases diferentes.
Espero que este artículo haya ayudado a entender cuáles son las diferencias entre ID’s y Clases en CSS. Si tienen alguna duda o sugerencia por favor dejen un comentario a continuación.