Warning Abuso de !important
Por qué depender de !important repetidamente dentro de una regla es señal de un problema de especificidad más profundo que vale la pena resolver.
El validador advierte cuando una sola regla usa !important tres o más veces.
Ejemplo
/* Marcado: recurriendo a !important repetidamente */
.boton {
color: white !important;
background: blue !important;
padding: 0.5rem !important;
}Por qué importa
!important anula el orden normal de la cascada, así que una declaración marcada con él le gana incluso a un selector más específico que aparece después. Usado con moderación — una sola anulación para un caso genuinamente excepcional, como corregir los estilos de un widget de terceros al que no se puede acceder de otra forma — es una vía de escape razonable. Recurrir a él repetidamente en una regla suele significar que algo más arriba en la cascada tiene demasiada especificidad o se carga en el orden equivocado, y !important se está usando para forzar una solución en vez de arreglarlo. Una vez que varias reglas recurren a él, la siguiente anulación necesaria tiene que agregar otro !important solo para ganar, y la cascada deja de significar algo.
Frequently asked questions
¿!important alguna vez es la herramienta correcta?
Sí, en casos puntuales — anular estilos en línea que no se pueden editar, o corregir CSS de terceros que no se controla. El problema es el uso habitual como solución alternativa a peleas de especificidad dentro de la propia hoja de estilos, que tiende a espiralizarse.
¿Cuál es una mejor solución que agregar más !important?
Rastrear por qué la regla de menor especificidad no está ganando — generalmente una regla anterior es más específica de lo necesario, o una regla posterior que debería ganar se carga antes o tiene menor especificidad de la esperada. Corregir la especificidad o el orden de carga en el origen evita necesitar !important en absoluto.