En el pasado artículo Conflictos CSS analizamos las posibles situaciones donde pueden existir problemas porque damos estilos diferentes a un mismo elemento en diferentes zonas de la página. Sin embargo, existe un recurso (desgraciadamente, muy conocido) en CSS para ignorar esas situaciones y darle preferencia al código que estamos escribiendo.
¿Qué es !important?
La palabra clave !important es un sufijo que se puede colocar al final de un valor de una propiedad CSS para forzarla a tener una importancia máxima sobre el resto de CSS existente. En otras palabras, el navegador hará caso exclusivamente a este valor, ignorando cualquier otro.
Observa el siguiente fragmento de código donde establecemos un color de texto:
- 1️⃣ En el estilo en línea, indicamos color azul.
- 2️⃣ En el estilo interno, indicamos color rojo.
- 3️⃣ En el estilo interno, luego, indicamos color verde.
<style>
.text { color: red!important; }
.text { color: green; }
</style>
<div class="text" style="color:blue">
Hello from Manz.dev!
</div>
Si no tuvieramos la declaración !important en el color rojo, el navegador haría lo siguiente:
- 1️⃣ En primer lugar, aplicaría el color rojo.
- 2️⃣ Luego, sobreescribiría con el color verde.
- 3️⃣ Luego, sobreescribiría con el estilo en línea azul.
Sin embargo, como hemos definido !important en el primer .text que aplica color rojo, le estamos dando mayor importancia y se salta cualquier otro cambio de color que se haga en el código.
¿Cuándo utilizar !important?
Se suele decir que utilizar !important es una mala práctica, sin embargo, es importante entender que en realidad lo que es mala práctica es usar !important de forma indiscriminada. El uso de !important existe por una razón, pero debe ser utilizado sólo como último recurso.
Si utilizas !important en exceso, lo más probable es que termines con un código que está continuamente sobreescribiendo los estilos y será muy difícil de leer y mantener.
Alternativas a !important
Una alternativa rápida a !important sería evaluar el selector utilizado, y hacerlo más específico. Con esto también se puede conseguir un resultado similar al de aplicar un !important. Sin embargo, explicaremos esto más profundamente en el próximo capítulo, donde hablaremos de Especificidad y veremos diferentes estrategias.
