Jerarquía CSS - Cómo evitar el uso de !important en CSS - Cómo sobreescribir a un important CSS

Actualmente el uso de la regla CSS !important está muy extendido y se aplica de forma abusiva, lo que nos genera archivos CSS complicados y muy difícil de mantener.

Como maquetadores webs nuestro objetivo tiene que ser generar un código CSS intentando no utilizar la regla !important, para ello lo primero que nos tiene que quedar claro es como funciona la jerarquía CSS.

Cuando hablamos de estilos en cascada nos referimos a un modelo de datos jerárquico en el cual los datos son organizados en una estructura parecida a la de un árbol, con relaciones  padre - hijo.

Si tenemos varias reglas asignando propiedades a un mismo elemento este va a asignar las propiedades CSS de mayor a menor importancia dependiendo de donde venga.

A continuación os mostramos los diferentes niveles ordenados de mas específicos a menos específicos.

NIVEL 01

---

- Estilos en línea (<p style="color:#fff;">)

NIVEL 02

---

- ID (#nombreId)

NIVEL 03

---

- Clases (.nombreClase)
- Atributos y Pseudo - Clases (:first-child, :last-child :hover ...)

NIVEL 04

---

- Elementos (a, p, ul ...)
- Pseudo - Elementos (::after, ::before, ::first-letter ...)

Resumiendo si ponemos en nuestro HTML un estilo CSS en línea, siempre va  a sobrescribir a los demás estilos CSS declarados, ya que se encuentra en el Nivel 01 y al ser el mas específico, es el que mayor importancia tiene.

La única manera de ganar a un estilo en línea es a través de la regla !important;

Podemos ver un ejemplo gráfico de los diferentes niveles de jerarquía CSS es esta Calculadora de Especificidad CSS.

También podemos consultar las especificaciones de los selectores CSS de la W3C.

Una vez entendido esto, para no llenar nuestra hoja de estilo CSS de !important simplemente tenemos que analizar nuestro HTML y aplicar clases más específicas al elemento que queramos sobrescribir.

A continuación os dejamos un esquema con diferentes selectores que podemos aplicar a un párrafo <p> y su nivel de jerarquía.

Esta vez hemos hecho un ranking con los niveles, digamos que el Nivel 1 es el que gana y sobrescribe a los demás. 

También os dejamos un ejemplo en nuestro CodePen.

Como curiosidad hemos puesto las clases mas específicas en las primeras líneas de nuestro CSS para demostrar que podemos sobrescribir una clase sin importar el orden del documento.

See the Pen Jerarquía CSS - Cómo evitar el uso de !important en CSS - Cómo sobreescribir a un important CSS by Pedro Marín (@pedromarin) on CodePen.

Como podéis comprobar hemos sobrescrito los estilos CSS del párrafo sin necesidad de utilizar !important solo hemos tenido que ser más específicos.