Clases (class) e Identificadores (id), ¿Cuál es mejor usar? Esta es una duda muy habitual entre cualquiera que se inicie en el apasionante mundo de CSS (Cascading Style Sheets). Si maquetas o diseñas webs (o estás pensando meterte es este mundillo) tarde o temprano te harás esta pregunta. Pero mejor vamos por partes.
El quid de la cuestión, a la hora de maquetar el HTML de una página web con CSS, es cómo se decide qué propiedades se le aplican a cada elemento y en qué orden.
Para especificar esto se usan los selectores, que, como su propio nombre indica, sirven para seleccionar los elementos a los que vamos a aplicar las propiedades que declararemos en nuestro código CSS.
La forma más sencilla es simplemente usar selectores de elementos. Por ejemplo:
body {color:#000;}
Esta regla haría que todo el texto dentro de la etiqueta body sea de color negro.
Pero a lo mejor queremos que el texto de los párrafos (identificados con el elemento <p>) tenga un color un poquito diferente, digamos, gris oscuro. Pues nada, definimos el color gris oscuro para los elementos de párrafo
p {color:#333;}
Claro que ahora quizá nos interesa destacar alguno de los párrafos de manera especial. Por ejemplo, poner un párrafo importante de color naranja o un párrafo que es resumen de todo el contenido en color púrpura y letra itálica (para gustos, colores...). ¿Cómo le decimos al navegador esto? En este caso podemos hacer uso de clases e Ids para especificar estas propiedades.
Nota: En realidad existen muchos más tipos de selectores y pseudo-selectores para identificar elementos, pero estos métodos más avanzados se escapan del propósito de este post y casi mejor lo dejamos para el curso de HTML y CSS, donde están maravillosamente explicado. Así que aquí nos centraremos en las clases e identificadores.
Así, al siguiente párrafo le podemos añadir la clase “destacado”:
<p class="destacado">Aquí va el texto que quiero destacar.</p>
Y en CSS lo ponemos en naranja a través de la propiedad “color”. Para marcar que es una clase anteponemos un punto al nombre de la clase:
.destacado {color:orange;}
Y obtendríamos:
Aquí va texto que quiero destacar.
Pero es que si lo hacemos con un ID:
<p id="destacado">Aquí va el texto que quiero destacar.</p>
En el código CSS, para indicar que es un ID, anteponemos el símbolo almohadilla (#) en vez del punto:
#destacado {color:red;}
En este caso obtendríamos exactamente el mismo resultado:
Aquí va texto que quiero destacar.
¿Qué pasa aquí? ¿Qué clase de brujería es esta? ¿Para qué usar dos cosas que sirven para lo mismo?
A primera vista, clases e IDs parece que sirven para lo mismo y que se emplearán de la misma manera: podemos aplicar propiedades CSS a elementos HTML a través de ambos y así modificar el aspecto visual y posicionamiento de estos al renderizarse en el navegador.
Pero esto, aunque, como hemos visto aparentemente es verdad, no es lo más apropiado; a continuación descubrirás que todo tiene su sentido. En realidad se usan para cosas diferentes.
Entonces, ¿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.
En nuestro pequeño ejemplo, usaríamos clases para los párrafos “destacados” porque lo más probable es que haya más de un párrafo que queramos destacar y así podemos controlar la apariencia de todos los párrafos destacados desde un único lugar. En cambio, también lo más probable es que sólo haya un párrafo que sea el resumen de todos los demás. En este caso usaríamos un ID, y nuestro código quedaría así:
<p id="resumen">Este es el resumen del texto y quiero que vaya en itálica.</p>
<p>Esto sería un párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Un nuevo párrafo de texto normal.</p>
<p class="destacado">Aquí va texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Más texto normal.</p>
<p class="destacado">Aquí iría más texto que quiero destacar.</p>
<p>Esto sería otro párrafo de texto normal.</p>
<p>Esto sería otro párrafo de texto normal.</p>
Y empleando clases sería:
body {color:#000;}
p {color:#333;}
#resumen {color:green;font-style:italic;}
.destacado {color:red;}
Y se vería así:
Este es el resumen del texto y quiero que vaya en itálica.
Esto sería un párrafo de texto normal.
Esto sería otro párrafo de texto normal.
Un nuevo párrafo de texto normal.
Aquí va texto que quiero destacar.
Esto sería otro párrafo de texto normal.
Más texto normal.
Aquí iría más texto que quiero destacar.
Esto sería otro párrafo de texto normal.
Esto sería otro párrafo de texto normal.
¿Y si lo complicamos un pelín?
Vale, ¿y entonces qué ocurriría si a un párrafo le metemos la clase y un id?:
<p class="destacado" id="resumen" >Vamos a vivir peligrosamente, a este párrafo le hemos puesto la clase y un id.</p>
Pues me encanta que me hagas esa pregunta. Lo que pasa es que se vería así:
Vamos a vivir peligrosamente, a este párrafo le hemos puesto la clase y un id.
¿Y por qué en este caso el párrafo aparece de color púrpura y en itálica? Pues porque los IDs son más importantes que las clases. Esto se debe a lo que en CSS se llama especificidad, que son una serie de reglas a través de las cuales se decide qué estilo prevalece en el caso de que se puedan aplicar varias propiedades contradictorias a un mismo elemento.
Y sí, un elemento puede tener asignadas a la vez una clase y un id. Es más, podría tener varias clases asignadas si las separamos por un espacio dentro del atributo class.
Este ejemplo está hecho con párrafos para que se vea más claramente el contraste entre elementos iguales, pero, como regla general, donde yo normalmente uso más los Ids es en elementos estructurales importantes como cabeceras, barras de navegación y columnas laterales.
¿Y tú, tienes alguna manía al respecto? ¿Te ha quedado claro cuando se usa cada cosa? Déjanos tus impresiones en los comentarios.
Fecha de publicación: