CSS !important

La declaración <!important> es una de las herramientas más poderosas en CSS, ya que sobrescribe las reglas de especificidad. Aunque puede ser útil cuando no hay otra forma de aplicar un estilo, su uso conlleva riesgos.

¿Qué es !important?

<!important> es una marca especial que convierte el valor de una propiedad en la máxima prioridad. Así, el navegador aplicará esta regla incluso si otra tiene mayor especificidad.

En este ejemplo se muestra cómo sobrescribir el color de un párrafo usando <!important>.

¿Dónde y cómo usarlo?

Conviene usar <!important> solo cuando no hay otra forma de aplicar una regla, por ejemplo, al sobrescribir hojas de estilo de terceros. Sin embargo, su uso excesivo dificulta el mantenimiento.

¿Por qué es peligroso abusar de él?

Un uso excesivo de !important puede desorganizar la hoja de estilos, dificultando entender qué regla se aplica. Esto a menudo obliga a añadir más y más declaraciones !important, generando caos.

Alternativas a !important

En lugar de !important, conviene aprovechar las reglas de especificidad de CSS: usa selectores más precisos, comprende la cascada (herencia) o coloca las reglas en el orden correcto.

Este ejemplo muestra cómo evitar el uso de !important gracias a la especificidad:

Consejos para usar !important

Algunas recomendaciones prácticas para aplicar <!important> de manera segura:

• Evita usarlo en exceso, ya que reduce la claridad del código.
• Utilízalo principalmente en casos excepcionales, como para sobrescribir estilos de librerías externas.
• Primero intenta resolverlo con las reglas de especificidad y recurre a <!important> solo como último recurso.