Saltar al contenido principal

La importancia de !important

May 12, 2016

Bueno básicamente nuestro amigo Harry nos exhorta a usar !important.

Empecemos por el principio

¿Qué es !important?

!important es una propiedad de css que te permite forzar algo.
Por ejemplo

.color_verde { color: #006600!important; }

En este caso cuando uses la class=”color_verde” asegurarás que tu texto sea de color verde

¿Por qué los front-end consideramos una falta de respeto a los Dioses* el uso de !important?

Básicamente porque es sinónimo de “No tengo una mejor solución a mi error y tengo que forzar un estilo que no pensé bien”. En muchos casos te encontrarás con que el estilo que quieres usar ya está definido en css y no puedes revertirlo fácilmente optas por poner un !important que después seguro intentarás cambiar otro !important y entrarás en una espiral de !importants de la cuál no podrás escapar nunca.

Entonces si !important es tan malo ¿Por qué este man recomienda usarlo?

Lo primero que debemos aclarar es cuándo NO usarlo

Cuando no encuentres una mejor solución

!important no debe de ser un último recurso, si te encuentras un caso donde no ves otra opción que !important usa la especificidad (si no sabes qué es especificidad recomiendo que leas “Tu estilo le gana a mi estilo” ), que no es exactamente buena pero es más correcta que el uso de !important.

Entonces cuándo debes usarlo

Cuando no quieras que se cambie algo ex profeso en css, si por ejemplo, quieres poner un texto en verde no importando qué, puedes usarlo

.color_verde { color: #006600!important; }

En conclusión

!important se debe usar para que tu css no cambie y no para cambiar un css existente

Resumen del texto:
The Importance of !important: Forcing Immutability in CSS
de Harry Roberts

*Los nuevos y los viejos

Tags: ,