CSS: Id vs. class

CSS: Id vs. class

En ocasiones he usado indiscriminadamente en mis hojas de estilo  el atributo id en lugar de las clases. La diferencia principal entre ambas es que el atributo id solo se puede aplicar a un elemento mientras que el atributo class se podía aplicar a múltiples.

El uso incorrecto de las clases sería definirlas para un único elemento. En cambio definir una id por cada elemento individual para estilos comunes sería incorrecto.

A la hora de definirlos los distinguimos mediante la colocación de un punto para las clases y una # para las id:

#header {} - id
.header {} - clase

Un posible uso incorrecto sería el siguiente:

#corporativo { color: red; font-size: 1.5em; text-decoration: none; }
#historia  { color: red; font-size: 1.5em; text-decoration: none; }
#contenido  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado  { color: red; font-size: 1em; text-decoration: none; }

Como varios de nuestros elementos se repiten podemos aunar los elementos comunes:

.textocolor  { color: red; font-size: 1.5em; text-decoration: none; }
#destacado { font-size: 1em; }

Aunque el resultado de ambos es el mismo el segundo código es más ligero e inteligible en caso de aplicar algún cambio.