Entendiendo la especificidad de CSS

Cuando un desarrollador Front End trabaja propiedades en CSS, suele utilizar (!important) para sobreescribir reglas. Entendiendo el funcionamiento de herramientas de especificidad y cascade de CSS, se obtiene un resultado eficaz, flexible y que logra recoger los valores de forma automática.

Renderiza de forma correcta

Si tenemos el siguiente código, el color que quedará instaurado será el verde por el hecho de haberlo escrito después.

Sin embargo, existe otra manera para que el CSS se entienda y logre renderizar de manera correcta, también conocido por especificidad.

¿Qué es la especificidad?

Según developer.mozilla.org (MDN), “la especificidad son los medios por los que el navegador decide qué valores de una propiedad de CSS son más relevantes para un elemento y, por lo tanto, serán aplicados“.

Es decir, podemos referirnos a un elemento por su etiqueta directamente “DIV” o quizás sobre alguna clase “.contenedor” o por una id “#wrap”. Cualquiera sea el caso, cada uno de ellos aporta un peso diferente a la hora en que el navegador decida que estilo es el que debe aplicar.

Una interesante tarea es dividir estos atributos en 4 secciones, las cuales van sumando puntos para que el navegador decida su elección.

Primer grupo (derecha a izquierda)

Puntuación de 1. 

Segundo grupo (derecha a izquierda)

Puntuación de 10.

Tercer grupo (derecha a izquierda)

Puntuación de 100.

Cuarto grupo (derecha a izquierda)

Puntuación de 1000.

Quinto grupo (no recomendado)

Al agregar un (!important) podemos lograr un quinto grupo

Puntuación de 10000.

En este último caso, se logra la puntuación de 121, ya que tiene los siguientes elementos:

id : #nav (100 pts).
clase + 1 pseudo – clase : .selected :hover (20 pts).
elemento : a (1 pto)

Existen diversas herramientas en las que podemos testear o comparar el CSS para una mejor escritura de este. Acá algunas de ellas:

• CSS Specificity Graph Generator: Permite copiar el CSS, generando un gráfico que muestra una comparativa entre la especificidad y el lugar donde se encuentra en nuestra hoja de estilos.

El punto más alto del gráfico es una declaración que está usando un #ID (gridle-settings) para seleccionar el elemento, que da una puntuación de 100.

La idea es visualizar dentro del gráfico que el “pic” está llegando al final del eje X.

• Scpecificity Calculator: Se trata de una práctica calculadora de especificidad. Simplemente hay que colocar el elemento el cual queremos medir y ¡voilà!

En este caso ambos apuntan al mismo elemento H2. Arriba sólo utiliza el elemento y abajo está un elemento + una clase, lo que le da una puntuación de 11.

Si quieres aprender más, mira la documentación oficial de la W3C y MDN.