La Regla !important del CSS

Hay una pieza especial de CSS que se puede utilizar para anular todos los cálculos anteriores, sin embargo se debe tener mucho cuidado con su uso: !important. Se utiliza para convertir una propiedad y un valor particular en el elemento más específico, de modo que se invalidan las reglas normales de la cascada.

¿Qué es la regla !importan?

La regla !important en CSS es usada para agregar mayor importancia a una propiedad/valor de lo normal. De hecho, si se usa la regla !important, esta anulara todas las reglas de estilos anteriores especificadas para esa propiedad a ese elemento.

Pero echemos un vistazo en un primer ejemplo, en donde establecemos diferentes estilos para párrafos a través de un id, una clase y una general agregando la regla !important:

CSS:

p#identificador {
  background-color: blue;
}
p.clase {
  background-color: gray;
}
p {
  background-color: red !important;
}

HTML:

<p>Esto es texto en un Párrafo.</p>
<p class="clase">Esto es otro texto en un Párrafo con clase.</p>
<p id="identificador">Esto es otro texto en un Párrafo con id.</p>

Muestra:

Como podemos ver, los tres párrafos son visualizados con un fondo rojo, a pesar de que el selector id y el selector class tienen mayor especificidad, es decir, la regla CSS !mportant anula las propiedades background-color en ambos casos.

Nota: La única manera de anular la declaración !important sería incluir otra declaración !important en una declaración con la misma especificidad que aparezca más adelante en el orden del código fuente, o con una especificidad superior.

Uso no recomendado

Es útil saber que !important existe para que sepas qué es cuando te lo encuentres en el código de otras personas. Sin embargo, te recomendamos encarecidamente que no lo utilices a menos que sea absolutamente necesario. !important cambia el modo en que suele funcionar la cascada, por lo que puede dificultar mucho la depuración de problemas en el CSS, especialmente en una hoja de estilo grande.

La única manera de anular una regla !important es incluyendo otra regla !important con el mismo o mayor especificidad en el código fuente, ... ¡y aquí inicia el problema! Porque esto hace que el código CSS sea confuso y difícil de corregir, especialmente si se tiene una hoja de estilos extensa.

A continuación vemos otro ejemplo, el cual no queda muy claro, cuando uno ve el código fuente CSS, de cuál color será considerado como el de mayor importancia:

CSS:

p#identificador {
  background-color: blue !important;
}
p.clase {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

HTML:

<p>Esto es texto en un Párrafo.</p>
<p class="clase">Esto es otro texto en un Párrafo con clase.</p>
<p id="identificador">Esto es otro texto en un Párrafo con id.</p>

Muestra:

Recomendación: Es bueno conocer el comportamiento de la regla !important, es posible que te topes con ella en algún código fuente CSS de un tercero, sin embargo, no se recomienda su uso a menos que sea estrictamente necesario.

Una situación en la que puede que tengas que utilizarlo es si trabajas en un CMS en el que no es posible editar los módulos básicos de CSS y realmente tienes que anular un estilo que no puede anularse de ninguna otra forma. Aun así, te recomendamos encarecidamente que evites su uso.

También, resulta útil señalar que la importancia de una declaración CSS depende de la hoja de estilo en que se especifica (es posible que los usuarios configuren hojas de estilo personalizadas para anular los estilos de los desarrolladores, por ejemplo, porque el usuario podría tener alguna discapacidad visual, o bien porque desea configurar el tamaño de letra de todas las páginas web que visita para que sea el doble de grande y le proporcione una mayor facilidad de lectura).

Posibles usos justificados

Un posible escenario que justifica el uso la regla CSS !important; es que se tiene que anular un estilo que no se puede anular de ninguna otra forma. Este escenario podría darse cuando se esta trabajando en un CMS (Sistema de Gestión de Contenidos) y es posible editar el código CSS original. Así, se puede establecer un estilo personalizado para anular algunos de los estilos del CMS.

Otro posible escenario para usar la regla CSS !important; es asumiendo que se desea dar un vista especial a todos los botones de una página. Así, se establecen los estilos para los botones con un color de fondo, color de texto, un espaciado y su borde respectivo.

CSS:

.botones {
  background-color: gray;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

HTML:

<a class="botones">Botón estándar</a>

Muestra:

La vista de estos botones puede cambiar a veces, como por ejemplo si lo colocamos dentro de otro elemento con mayor especificidad, con esto algunas propiedades podrían entrar en conflicto como supones a continuación:

CSS:

#undiv a {
  color: reg;
  background-color: yellow;
}

HTML:

<a class="botones">Botón estándar</a>
<div id="undiv">
  <a class="botones">Otro Botón estándar</a>
</div> 

Muestra:

Para forzar que todos los botones tengan el mismo aspecto, no importa cual, en este punto se justifica establecer la regla CSS !important  a las propiedades que dan estilo a los botones, de la siguiente manera:

CSS:

.botones {
  background-color: gray !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

Muestra: