Estoy trabajando con wordpress, concretamente añadiendo css personalizado en las opciones de la plantilla. Lo único al respecto que dice sobre esa etiqueta es que a veces es necesaria pero no se cual es su verdadera función ni para que sirve.
2 respuestas
Se trata de una regla de CSS, definida en el apartado 6.4.2 de W3C Recommendation.
Las reglas CSS se aplican en cascada, de arriba hacia abajo. Lo que hace !important
es sobre-escribir cualquier regla anterior, rompiendo la cascada. Por eso es considerada una mala práctica, aunque hay casos (muy escasos valga la redundancia) en que se justifique su uso. Por lo tanto no conviene abusar de ella, debería usarse excepcionalmente.
Por ejemplo, esto es lo que dice MDN al respecto en el apartado titulado la excepción !important
:
Cuando se emplea
!important
en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente!important
no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de!important
es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el!important
son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad.
Algunas reglas del juego:
- Busca siempre una manera de emplear la especificidad antes de considerar el uso de
!important
- Usa
!important
solo en declaraciones específicas de CSS que sobrescriban CSS foráneo (de librerías externas como Bootstrap o normalize.css). - Nunca uses
!important
cuando estás intentando escribir un plugin/mashup. - Nunca uses
!important
en todo el CSS.
En lugar de usar !important
, considera:
- Hacer un mejor uso de las propiedades en cascada de CSS.
Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:
<div id="test"> <span>Texto</span> </div> div#test span { color: green } div span { color: blue } span { color: red }
Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar.
No importa el orden, el texto será verde porque la regla es más específica. (Además, la regla para el azul sobrescribe a la regla para el rojo, a pesar del orden de las reglas)
Deberías usarlo cuando:
A) Escenario uno:
- Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
- Tú (u otros) usas estilos inline en los propios elementos. Esto es considerado como una muy mala práctica.
En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.
Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.
B) Otro escenario:
#someElement p {
color: blue;
}
p.awesome {
color: red;
}
¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement
? Sin !important
, la primera regla tendrá más especificidad y ganará a la segunda.
Cómo sobrescribir !important
A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.
Algunos ejemplos con una gran especificidad:
table td {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}
B) O añade el mismo selector después de uno existente:
td {height: 50px !important;}
C) O reescribe la regla original para evitar el uso de !important
.
-
Buena respuesta, especialmente por las recomendaciones para evitar su uso. Commented el 11 oct. 2018 a las 9:33
-
Muy buena respuesta, y como dice @PabloLozano, muy correcto que estreses el hecho de que es una mala práctica. Siempre se debe intentar usar especificidad, o patrones o metodologías como BEM o OOCSS, e intentar evitar !important.– natCommented el 11 oct. 2018 a las 10:42
La función !important
de CSS
sirve para sobreescribir un estilo, es decir, darle importancia.
Cuando usas un framework
, por ejemplo Bootstrap
(o en tu caso WordPress) , éste viene con sus propios estilos.
Entonces si necesitas poner un estilo propio, le agregas la función !important
.
Por ejemplo:
HTML:
<p class="rojo">Hola</p>
CSS:
.rojo{
color: red;
}
p{
color: blue !important;
}
En este caso, el color del párrafo no será de color rojo, sino de color azul, ya que le hemos asignado !important
Puedes leer más al respecto aquí https://desarrolloweb.com/articulos/declaracion-important-css.html