Cómo usar el código “!important” de CSS correctamente

A veces, en CSS querrá anular un conjunto de reglas de estilo en un elemento HTML por varias razones. Esta manipulación es posible gracias a la mención “! Important” que se agrega después de una declaración CSS.

Sin embargo, usar este “! Importante” demasiado puede causar problemas de superposición de reglas y hacer que su formato sea muy complicado.

¡Hoy, por lo tanto, vamos a ver cómo usar correctamente el CSS ”! important”para que el formato de su sitio web no sea un laberinto de“! important ”.

Todo lo que necesitas saber sobre “!important”

En primer lugar, “! Important” no es una propiedad CSS ni un valor de propiedad, es una declaración que se agrega después del valor dado a una propiedad. Su efecto se aplica solo a la propiedad a la que se agrega, no a todas las propiedades del elemento HTML o selector.

Para usar “! Important”, tendrá que escribirlo así en su código:

p {
font-size: 20px;
color: green !important;
font-weight: bold;
}

En este ejemplo, solo la propiedad CSS y su valor “color: verde” se establecerán en “importante”.

Como vimos rápidamente en la introducción de este artículo, la mención “! Importante” se usa para anular una declaración CSS para anular la declaración CSS principal con el mayor peso. Entonces, tomando el ejemplo anterior con el párrafo HTML, si agregamos una nueva declaración de la propiedad “color” CSS como esta:

p {
font-size: 20px;
color: green !important;
font-weight: bold;
}

#paragraphe {
color: blue;
}

El selector de etiquetas “p” tendrá más fuerza gracias a la sobrecarga de “! Important” y por lo tanto el párrafo permanecerá verde a pesar de que el selector de id (#paragraphe) tiene una fuerza mayor frente a una etiqueta (p) cuando el peso de los dos selectores es idéntico. Concretamente, sin el “! Importante” en la declaración “color: verde” el párrafo sería azul (azul), pero como está ahí, el peso del selector “p” se vuelve más pesado en la escala y es la declaración que tiene la mención “! important” que tiene prioridad y define el valor de la propiedad.

Tomando el ejemplo anterior, si la declaración “color: blue” también tenía la mención “! Important”, entonces se aplicará el sistema clásico de ponderación CSS entre las dos declaraciones con “! Important”. En este ejemplo imaginado, el párrafo sería azul (azul) porque con un peso equivalente, un selector de identificación (#paragraphe) tiene más fuerza que un selector de etiquetas (p).

Sin embargo, si los dos selectores tienen el mismo peso y fuerza, entonces la operación en cascada se aplica cuando dos menciones “! Importantes” compiten por la misma propiedad del mismo elemento.

Volvamos a nuestro ejemplo anterior e imaginemos que los selectores son idénticos (mismo peso y fuerza) y que la segunda declaración de “color” también está marcada como “! Importante” de esta manera:

p {
font-size: 20px;
color: green !important;
font-weight: bold;
}

p {
color: blue!important;
}

Como existen dos “! Importantes” en la misma propiedad y los selectores son idénticos, en este caso se tendrá en cuenta el “! Importante” más bajo de la cascada (orden de lectura de arriba a abajo). En este nuevo ejemplo, el párrafo será azul (azul) y no verde (verde).

Lo último que debe saber es que “! Important” se puede usar en cualquier lugar donde pueda escribir una declaración CSS. En un archivo HTML, puede utilizar “! Important” de estas dos formas:

<style>

p {
font-size: 20px;
color: green !important;
font-weight: bold;
}

</style>

<p style="font-size:16px !important">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Cuándo usarlo

La principal ventaja de “! Important” es poder sobrecargar una declaración que tiene demasiado peso que no se puede superar.

Imagine que en un código HTML tiene una propiedad de “color” definida en una etiqueta o atributo de “estilo” para uno de los elementos HTML. Desea anular esta propiedad de “color” sin agregar peso al selector porque no desea o no puede agregar ninguno. Por ejemplo, en este caso puede usar la mención “! Importante” en uno de los selectores del elemento HTML para cambiar su propiedad “color”.

Esto nos dará la siguiente situación:

Código HTML:

<p style="color:blue">Haz click aquí!</p>

Código CSS:

p {
color: red !important;
}

Gracias a “! Importante” el párrafo será rojo y no azul como debería haber sido porque sin la mención “! Importante” el atributo “estilo” tiene más fuerza que la etiqueta selectora “p” para ponderar igual.

“! Importante” también se puede utilizar para proteger una clase CSS que desea que sea inmutable. Un buen ejemplo de esta situación es la creación de una clase CSS que le permite formatear botones.

Empecemos por el siguiente código HTML:

<a href="https://www.iberbanda.es" class="miBoton">Haz click aquí!</a>

Y este código CSS que permite crear un botón desde nuestro enlace:

.miBoton { border: none; padding: 6px; border-radius: 2px; box-shadow: 1px 1px 3px #aaa; background: #ffffff; font: bold 13px Arial; color: #555555; text-decoration: none; }

Para obtener el siguiente resultado:

Actualmente nuestro botón está perfectamente formateado. Sin embargo, si durante el desarrollo o las mejoras del sitio, el código cambiara agregando contenido al HTML y CSS, ese botón perfecto podría verse afectado.

Si agregamos contenido al botón en HTML como este, por ejemplo:

<section id="boton">

<p><a href="https://www.iberbanda.es" class="miBoton">Haz click aquí</a> para visitar esta web</p> </section>

Y que el código CSS se modifica así:

.miBoton { border: none; padding: 6px; border-radius: 2px; box-shadow: 1px 1px 3px #aaa; background: #ffffff; font: bold 13px Arial; color: #555555; text-decoration: none; } #bouton a { border-bottom: 3px dashed #8ebf42; }

Entonces el resultado no será el mismo y el botón no habrá mantenido su integridad inicial:

Para evitar estos cambios no deseados durante el desarrollo o futuras mejoras del sitio, puede usar el aviso “! Importante” para cada propiedad CSS de la clase que desee mantener intacta. En nuestro caso, sin cambiar el HTML o el resto del CSS queremos que el botón mantenga exactamente su forma original. Por lo tanto, vamos a agregar una mención “! Importante” a cada propiedad de nuestra clase de esta manera:

.miBoton { border: none!important; padding: 6px!important; border-radius: 2px!important; box-shadow: 1px 1px 3px #aaa!important; background: #ffffff!important; font: bold 13px Arial!important; color: #555555!important; text-decoration: none!important; } #bouton a { border-bottom: 3px dashed #8ebf42; }

De esta manera, nuestro botón permanecerá intacto y no se verá afectado por futuras adiciones de código CSS:

Conclusión

“! Important” es una herramienta poderosa que puede permitirle jugar con el sistema de ponderación CSS al anular las propiedades que se benefician de la mención “! Important”. Gracias a esto, puede crear clases CSS inmutables o anular ciertas reglas CSS.

Tenga cuidado, sin embargo, de no abusar de él porque su código CSS puede terminar rápidamente muy complejo con múltiples “! Important” que se apoderan gradualmente de otros “! Important” previamente declarados y arruinando su código.

Por lo tanto, favorezca el sistema de peso cuando pueda configurando un selector más pesado que el que desea redefinir en lugar de usar el “! Importante” para mayor facilidad.