La especificidad en Hojas de Estilo CSS

Un pequeño pero eficaz consejo que puedo dar para todos aquellos que empiezan a desarrollar sus primeras hojas de estilo CSS, es tener en cuenta el factor de la especificidad en CSS, su influencia y la manera de controlarlo.

La especificidad es una propiedad pocas veces valorada por muchos desarrolladores web novatos, y que por lo mismo puede causar la desesperación de más de uno al momento de aplicar estilos a nuestro código.

¿Qué es la especificidad en CSS?

¿En qué consiste? Básicamente la especificidad se refiere al valor que toma cada uno de los elementos de una hoja de estilo, hay selectores que tienen más peso e importancia que otros, es decir más especificidad.

Entre más especificidad exista, tendremos menos posibilidades de equivocarnos al aplicar el estilo que queremos a cierto elemento, y es ahí donde la desesperación de no obtener lo que queremos desaparecerá.

Como calcular la especificidad CSS

Existe una forma sencilla de calcular la especificidad CSS, es mediante una fórmula considerada incluso como un cálculo ya estandarizado. Consiste en sumar los puntos totales de una sentencia CSS en base a los selectores o elementos de los que está compuesto.

Se le da un valor de 1 punto a un elemento simple como una etiqueta a, p o div, a un selector de clase se le da el valor de 10 puntos y a un selector de id se le da un valor de 100 puntos, siendo únicamente superado por los atributos de estilos a los que se les da un valor de 1000 puntos.

Es decir; supongamos que queremos agregar un estilo los párrafos de nuestro documento, si agregamos en nuestro CSS un selector p{…}, este será utilizado para dar estilo a todos los párrafos del HTML, pero sólo se le dará el valor total de 1 punto, esto quiere decir que tiene poco especificidad.

Por lo cual si existe otro selector en el mismo CSS que diga así “.par p{…}” tendrá mayor importancia que el anterior, ya que le estamos agregando una clase por lo que la especificidad aumenta en 10 puntos es decir 10 puntos por el selector clase más 1 punto por el elemento nos da 11 puntos.

De la misma manera esto se aplica para los id, si agregamos una línea que diga “#parr p{…}” esta tomará el valor de 101 puntos de especificidad, por lo que será la más importante, así podemos crear combinaciones para que los estilos se apliquen correctamente.

Un ejemplo de especificidad con CSS

Con el siguiente código CSS:


p{
background: crimson;//Especificidad de 1 punto
}
.par{
background: pink;//Especificidad de 10 puntos
}
p.par{
background: maroon;//Especificidad de 11 puntos
}
#parr{
background: orange;//Especificidad de 100 puntos
}
p#parr{
background: red;//Especificidad de 101 puntos
}
p.par#parr{
background:green;//Especificidad de 111 puntos
}

Obtendré los siguientes resultados si inserto este bloque en mi HTML:

<p>El fondo de este párrafo será color carmesí</p>
<p class="par">El fondo de este párrafo será color granate</p>
<div class="par">Este div tendrá el fondo de color rosa</div>
<p id="parr" class="par">El fondo de este párrafo será de color verde</p>
<p id="parr" style="background: black;">El fondo de este párrafo será negro porque use un atributo de estilo dentro de la etiqueta</p>
<p id="parr">El fondo de este párrafo será rojo</p>

Tengan en mente estos números al momento de realizar sus CSS y no se confundirán al momento de desplegar su web en su navegador, ya que obtendrán lo que calcularon.