12

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?

1 respuesta 1

16

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:

  • Selectores de título (p.ej: p) y pseudo-elementos (p.ej: :before)
  • Selectores de clase (p.ej: .ejemplo), selectores de atributos (p.ej: [type="text"] y pseudo-clases (p.ej: :focus)
  • Selectores ID (p.ej: #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:

  • Cuando haya otra declaración !important aplicando a un estilo concreto
  • En librerías de terceros en las que hacen uso de !important y que, por lo tanto, no podemos sobrescribir de otra manera (a no ser que modifiquemos los estilos de la librería directamente)
  • En caso de que quieras crear clases para dar un estilo común a todos los elementos de un tipo concreto de tu página. P.ej: que todos los 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.

Conclusión

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.

3
  • 1
    Buena respuesta canónica. Igual estaría bien añadir la típica tabla para calcular la especifidad, en selectores complejos la gente se pierde, algo como esto: Especifidad CSS. Y quizá la prioridad en las hojas de estilo: Prioridad CSS ¿Qué te parece?
    – user7176
    Commented el 5 dic. 2017 a las 7:29
  • 3
    @blonfu Mi idea era completar la respuesta dos secciones más: con selectores complejos y preguntas típicas del tipo: ¿Cómo sobreescribir propiedades de bootstrap? Sin embargo, por falta de tiempo no pude completarla el otro día, espero en estos días próximos poder completarla del todo. Si se te ocurre alguna otra idea será bienvenida. Muchas gracias por el feedback!! 😉 Commented el 5 dic. 2017 a las 7:33
  • @Francisco Romero gracias por tu contribucion, personalmente a sido muy instructivo. Commented el 18 ene. 2018 a las 22:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.