He visto en muchos casos que hacen referencia a la especificidad de CSS cuando intento sobrescribir un estilo concreto de CSS.
¿Qué es realmente y para que se utiliza la especificidad de CSS?
La especificidad hace referencia a la relevancia que tiene un estilo concreto de CSS sobre un elemento de la página al cual le están afectando varios estilos de CSS al mismo tiempo. Es decir, hace referencia al grado de importancia de un estilo sobre otro.
Cuanto mayor sea la especificidad que le estemos dando a un estilo, mayor será la probabilidad de que ese estilo sea el aplicado finalmente. Para ello, las reglas de CSS siguen un orden de prioridad.
El orden de prioridad va de la siguiente manera, de menor a mayor especificidad:
p
) y pseudo-elementos (p.ej: :before
).ejemplo
), selectores de atributos (p.ej: [type="text"]
y pseudo-clases (p.ej: :focus
)#ejemplo
)Sin embargo, además de todas estas especificidades, si utilizamos estilos inline estos sobrescribirán cualquier estilo de las páginas externas de CSS. Se podría decir que los estilos inline son los que tienen una mayor especificidad, por lo tanto, nunca debemos utilizar estilos inline en nuestra página.
Ejemplo de estilos con un ID sobre una clase
#parrafo{
color: green;
}
.parrafo{
color: red;
}
<p id="parrafo" class="parrafo">Esto es una prueba</p>
Como podemos observar, tenemos dos estilos que hacen referencia al párrafo (el ID #parrafo
y la clase .parrafo
) y, según el modelo en cascada que utiliza CSS para aplicar los estilos, debería de aplicarse la clase .parrafo
ya que está en último lugar colocada en el fichero CSS. Sin embargo, vemos que no es así.
Es aquí cuando entra en juego la especificidad y, al tener un ID que tiene una mayor especificidad que una clase, es el estilo correspondiente al ID el que se aplica finalmente.
Ejemplo de estilos inline sobre un ID
#parrafo{
color: green;
}
<p id="parrafo" style="color: red">Esto es una prueba</p>
Como podemos observar, el párrafo, por mucho que tenga un ID (elemento con mayor especificidad) con un estilo de color verde, no se aplica porque también tiene estilos de manera inline y, por lo tanto, se aplican estos últimos al tener una mayor especificidad.
EXCEPCIÓN: El uso de !important
¡¡CUIDADO!!: El uso de la declaración !important
está considerado una mala práctica. Lo explico en el punto siguiente.
La declaración !important
asociada al estilo de un elemento ignora la especificidad del resto de estilos aplicados a ese elemento y aplica los estilos marcados con dicha declaración.
Haciendo referencia al primer ejemplo:
#parrafo{
color: green;
font-size: 15px;
}
.parrafo{
color: red !important;
font-size: 3px;
}
<p id="parrafo" class="parrafo">Esto es una prueba</p>
Según este ejemplo, y según hemos visto del orden de prioridad de la especificidad de CSS, el texto debería ser verde y con un tamaño de fuente de 15px (debido al ID). Sin embargo, vemos que el texto resultante es rojo y con un tamaño de fuente de 15px.
¿Por qué ocurre esto? Porque a pesar de que el color rojo está contenido dentro de una clase que tiene una menor especificidad que un ID, la declaración !important
ignora el orden de prioridades de la especificidad y establece este estilo como el que prevalece sobre los demás.
¿Por qué es considerado una mala práctica el uso de !important?
Porque rompe totalmente con las reglas de CSS y dificulta mucho las tareas de mantenimiento de nuestro CSS.
Por ejemplo, imaginemos que queremos que todos los párrafos de nuestra página dentro de un div sean de un color verde, excepto dos párrafos que serán de color rojo y de color morado respectivamente.
Una posible solución podría ser la siguiente:
.coloreados p{
color: green;
}
#rojo{
color: red;
}
#morado{
color: purple;
}
<div class="coloreados">
<p>Este es de color verde</p>
<p>Este es de color verde</p>
<p id="morado">Este es de color morado</p>
<p>Este es de color verde</p>
<p id="rojo">Este es de color rojo</p>
</div>
Como vemos, todos los párrafos dentro del div con la clase .coloreados
se ven afectados, excepto dos, a los que les hemos asignado un ID, #morado
y #rojo
y los cuales se aplican sobre dichos párrafos porque tienen una mayor especificidad.
Pero, ¿que pasaría si usáramos la sentencia !important
en la clase .coloreados
?
.coloreados p{
color: green !important;
}
#rojo{
color: red;
}
#morado{
color: purple;
}
<div class="coloreados">
<p>Este es de color verde</p>
<p>Este es de color verde</p>
<p id="morado">Este es de color morado</p>
<p>Este es de color verde</p>
<p id="rojo">Este es de color rojo</p>
</div>
Tal y como podemos ver en el ejemplo anterior, los estilos para los ID #morado
y #rojo
no se están aplicando a pesar de que tienen una mayor especificidad que la clase. Esto se debe al uso de !important
.
El resultado del ejemplo anterior es un problema ya que solo podríamos sobrescribir dichos estilos con otro !important
asociado a cada uno de los ID, lo que nos limita mucho a la hora de aplicar las reglas de CSS, lo que implica que es mucho más difícil de mantener.
Entonces, ¿nunca debería de usar !important?
No, hay veces (muy pocas) que no hay otra opción que usar la declaración !important
o que nos viene bien para casos muy concretos. En mi opinión, estos casos serían:
!important
aplicando a un estilo concreto!important
y que, por lo tanto, no podemos sobrescribir de otra manera (a no ser que modifiquemos los estilos de la librería directamente)h1
que haya en tu página tengan un color azul y una fuente determinada. De esta manera, "te aseguras" (a no ser e que haya otro !important
que los sobrescriba) que todos los h1
de tu página vayan a tener el mismo estilo.Siempre que sea posible, deberíamos hacer uso de la especificidad de CSS para aplicar nuestros estilos e intentar sobrescribir los que ya tenemos.
NUNCA deberíamos abusar del uso de !important
, ya que nos supondrá un mayor esfuerzo a la hora de mantener y aplicar las reglas de CSS sobre los estilos de nuestra página.