Saltar al contenido

Cómo usar la propiedad !important en CSS

febrero 20, 2022
Programmer using important property in CSS.jpgkeepProtocol

Al diseñar su sitio web, puede aplicar varias declaraciones CSS al mismo elemento. En ese caso, el navegador determina qué declaraciones son las más relevantes para un elemento y las aplica.

Esta relevancia, o especificidad, se basa en las reglas de coincidencia de los selectores de CSS. Los selectores de CSS son modificadores que le dicen a un navegador qué elementos diseñar con CSS. Hay diferentes tipos de selectores, cada uno con su propia sintaxis y nivel de especificidad.

Descargar ahora: Guía de introducción gratuita a HTML y CSS

Sin embargo, hay una excepción a las reglas de la especificidad de CSS. Se conoce como la regla importante. Repasemos un breve resumen de las reglas de especificidad, luego echemos un vistazo más de cerca a la regla importante a continuación. Cubriremos:

Resumen de la especificidad de CSS

Los siguientes tipos de selector se clasifican de mayor a menor especificidad:

  1. selectores de identificación: Estos seleccionan un elemento en función de su atributo ID y tienen la sintaxis #idname.
  2. Selectores de clase, selectores de atributo y selectores de pseudoclase:
    a) Los selectores de clase seleccionan todos los elementos en una clase CSS y tienen la sintaxis .nombre de la clase.

    B) Los selectores de atributos seleccionan todos los elementos que tienen un atributo dado y tienen la sintaxis [attr].

    C) Los selectores de pseudoclase seleccionan elementos solo cuando se encuentran en un estado especial, como visitado o flotante, y tienen la sintaxis selector:pseudo-clase.

  3. Selectores de tipo: Estos seleccionan todos los elementos HTML que tienen un nombre de nodo dado y tienen la sintaxis elemento.

Nota: El selector universal

no tiene efecto sobre la especificidad.

Si se realizan varias declaraciones con la misma especificidad, como un selector de clase y un selector de atributo, en el mismo elemento, entonces se aplicará al elemento la última declaración (es decir, la declaración que aparece más adelante en la hoja de estilo).

En CSS, importante significa que solo se debe aplicar el valor de la propiedad !important a un elemento y todas las demás declaraciones sobre el elemento se deben ignorar. En otras palabras, se puede usar una regla importante para anular otras reglas de estilo en CSS.

Aunque es más fácil que seguir las muchas reglas de especificidad cuando se combinan valores de propiedad, usar la propiedad !important se considera una mala práctica. Esto se debe a que rompe la cascada natural de las hojas de estilo, lo que dificulta mucho más el mantenimiento y la depuración de su sitio web.

Sin embargo, existen casos de uso específicos en los que es ideal utilizar la propiedad !important. Uno de esos casos de uso es la definición de clases de utilidad, como la clase de botón.

Supongamos que desea que cualquier elemento objetivo de la clase de botón se vea como el mismo botón: fondo naranja, color de fuente blanco, borde negro sólido. Sin la propiedad !important, usaría el siguiente código para hacer que un enlace parezca un botón.

 
<a href="#" class="button">Click Me</a>

Aquí está el HTML:

 
.button {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}

Aquí está el CSS:

Aquí está el resultado: ver la pluma Elemento de anclaje con clase de botónde Christina Perricone (@hubspot ) enCódigoPen

.

Ahora supongamos que sigues construyendo tu página web. En algún momento, agrega una nueva sección con el ID «contenido» a su HTML. Esta sección contiene otro enlace con la clase de botón. También agrega otra regla a su CSS, definiendo todos los elementos con el nombre de ID «contenido» para que tengan un borde azul sólido. Tendrías el siguiente código.

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

Aquí está el HTML:

 
.button {
background: #FF7A59;
color: #FFFFFF;
padding: 5px;
font-size: 50px;
border-radius: 5px;
border: 2px solid black;
}
#content a {
border: 4px solid #00A4BD;
}

Aquí está el CSS:

Aquí está el resultado: ver la pluma xxgQYKqde Christina Perricone (@hubspot ) enCódigoPen

. Debido a que un selector de ID tiene una especificidad más alta que un selector de clase, el estilo CSS del selector #contenido un tiene prioridad sobre el estilo CSS del selector.botón

. Es por eso que el segundo elemento tiene un borde azul sólido, no uno negro sólido.

Un escenario como este es inevitable, ya sea que esté creando un sitio desde cero o utilizando un marco como Bootstrap CSS. Cuanto mayor sea el volumen de código con el que está trabajando, más difícil será realizar un seguimiento de la especificidad de sus selectores de CSS.

Puede evitar las inconsistencias de estilo del escenario mencionado anteriormente en su sitio usando la propiedad !important. Veamos cómo usar exactamente esta propiedad a continuación.

Cómo usar Importante en CSS

 
   element {
style property !important;
}

Usar la regla !importante en CSS es fácil. Solo tienes que añadir !important al final de la línea, inmediatamente antes del punto y coma. Entonces la sintaxis sería:

Echemos un vistazo a cómo cambia el CSS del ejemplo anterior al agregar la regla !important.

Ejemplo importante de CSS

Para este ejemplo, desea que cualquier elemento al que se dirija la clase de botón se vea como el mismo botón: fondo naranja, color de fuente blanco, borde negro sólido.

El problema es que tiene algunos elementos de anclaje (o enlaces) definidos por la clase de botón y un nombre de ID. En su CSS, los elementos con este nombre de ID tendrán un borde azul continuo. Dado que los selectores de ID son más específicos que los selectores de clase, estos elementos de anclaje tendrán el estilo de un botón con un fondo naranja y un color de fuente blanco, pero tendrán un borde azul sólido en lugar de negro sólido.

No desea ese tipo de estilo inconsistente en su sitio. Por lo tanto, utilizará la regla !importante al especificar el CSS para la clase de botón.

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

El HTML sigue siendo el mismo:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#content a {
border: 4px dotted #00A4BD;
}

El CSS se convierte en:

El resultado es: ver la pluma Ejemplo importante de CSSde Christina Perricone (@hubspot ) enCódigoPen

.

Notarás cómo ambos elementos se ven idénticos gracias a la regla !importante.

CSS importante no funciona

Supongamos que usa la regla !important en su CSS, pero los elementos no tienen el estilo que desea. Solo hay un par de razones por las que la regla importante no funcionaría. En primer lugar, la regla !importante no funcionará en la hoja de estilo del autor si se utiliza en la hoja de estilo del usuario.

La hoja de estilo del autor es proporcionada por el autor de la página web. La hoja de estilo del usuario es proporcionada por el usuario del navegador. De forma predeterminada, las reglas de CSS en la hoja de estilo de un autor anulan las de la hoja de estilo de un usuario. Sin embargo, para crear un equilibrio de poder entre autores y usuarios, las reglas importantes en una hoja de estilo de usuario anularán las reglas importantes en la hoja de estilo del autor. Esta función CSS está diseñada para

accesibilidad. Los usuarios que necesitan fuentes más grandes, combinaciones de colores específicas u otros requisitos debido a discapacidades relacionadas con la visión pueden mantener el control sobre la presentación de una página web.

También es posible que haya agregado !important a un conjunto de reglas CSS que está anulado por otro conjunto de reglas CSS con la regla !important más adelante en la hoja de estilo. Es posible que haya hecho esto por accidente, lo que explicaría por qué importante no funciona, o puede querer hacerlo a propósito.

Hay dos formas de anular una etiqueta !important en CSS. Puede agregar otra regla CSS con una etiqueta !importante y usar un selector con una especificidad más alta. O puede agregar otra regla CSS con una etiqueta !important usando el mismo selector y simplemente agregarla más tarde en la hoja de estilo.

¿Por qué funcionan estos dos métodos? Debido a las reglas de especificidad. Cuando se aplican a un mismo elemento dos declaraciones que utilizan la regla !important, se aplicará la declaración con mayor especificidad o la declaración definida en último lugar. Es posible que recuerde estas reglas de la introducción, pero es importante comprender que se aplican a las declaraciones que usan la regla !importante, así como a las declaraciones que no usan la regla.

En lugar de anular la propiedad !important en CSS con otra propiedad !important, lo ideal es volver a escribir la regla y evitar usar la propiedad por completo. Pero a veces esto no es posible. Tome las hojas de estilo de usuario, por ejemplo. Usando una hoja de estilo de usuario personalizada, un lector puede anular los estilos del sitio web de acuerdo con sus deseos. Un lector podría, por ejemplo, aumentar la

tamaño de fuente o cambiar el color de la tipografía en la página para permitirles ver mejor el contenido.

Dado que una hoja de estilo definida por el usuario anulará una hoja de estilo de autor independientemente de la especificidad, un lector podría agregar reglas CSS sin la etiqueta !important. Sin embargo, si la hoja de estilo del autor utiliza la regla !importante para definir el tamaño o el color de la fuente, la regla !importante será necesaria en la hoja de estilo del usuario.

Continuemos usando el mismo ejemplo de botón de arriba. Digamos que mi sitio web ya tenía las reglas importantes aplicadas a la clase de botón. Pero ahora quiero que todos los elementos con el nombre de ID «contenido» tengan un borde azul sólido.

Simplemente debería reescribir el código, eliminando todas las etiquetas importantes de mi CSS. Pero digamos que tengo poco tiempo y busco una solución rápida. Entonces simplemente podría agregar la etiqueta !important al selector de ID de CSS. Entonces, ambas declaraciones utilizarían la propiedad !important y, debido a que los selectores de ID tienen una especificidad más alta que los selectores de clase, el elemento en la sección de contenido tendría un borde azul sólido.

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

El HTML sigue siendo el mismo:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF !important;
padding: 5px !important;
font-size: 50px !important;
border-radius: 5px !important;
border: 2px solid black !important;
}
#content a {
border: 4px dotted #00A4BD !important;
}

El CSS se convierte en:

El resultado es: ver la pluma Ejemplo 1 de anulación de la regla !Importantde Christina Perricone (@hubspot ) enCódigoPen

.

Las reglas importantes esencialmente se anulan entre sí. Entonces, dado que el selector de ID tiene una especificidad más alta que un selector de clase, el segundo elemento tiene un borde azul sólido, no uno negro sólido.

También puede anular la regla !importante usando un selector CSS de la misma especificidad, pero colocándolo más tarde en la hoja de estilo.

Digamos que quiero que todos los botones de mi sitio web tengan un borde azul sólido. Nuevamente, simplemente debería volver a escribir el código, pero puedo usar la etiqueta !important para una solución rápida. Usando el mismo selector de clase .btn con una nueva regla para el borde azul sólido y una etiqueta !importante, simplemente puedo agregarlo después de la regla existente en la hoja de estilo. Debido a que viene más tarde, tiene una mayor especificidad y se aplicará a los elementos con la clase .btn.

 
<a href="#" class="button">Click Me</a>
<section id="content">
<p> text text blah <a href="#" class="button">Click Me</a> </p>
</section>

El HTML sigue siendo el mismo:

 
.button {
background: #FF7A59 !important;
color: #FFFFFF...

El CSS se convierte en: