Cómo usar Propiedad importante en CSS

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

Esta relevancia, o especificidad, se basa en las reglas de coincidencia de selectores CSS. Los selectores de CSS son modificadores que le indican al navegador a qué elementos aplicar estilo con CSS. Hay diferentes tipos de selectores, cada uno con su propia sintaxis y nivel de detalle.

Sin embargo, hay una excepción a las reglas de especificidad de CSS. Esto se conoce como la regla importante. Echemos un vistazo rápido a las reglas de granularidad, luego echemos un vistazo más de cerca a la regla importante a continuación. Discutiremos:

Resumen de los detalles de CSS

Los siguientes tipos de selectores se clasifican de mayor a menor granularidad:

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

   b) Los selectores de atributos seleccionan todos los elementos que tienen el atributo dado y tienen sintaxis [attr].

   C) Los selectores de pseudoclase solo seleccionan elementos si se encuentran en un estado especial, como visitados o pasados ​​por encima, y ​​tienen sintaxis selector: pseudo-clase.

3. Selectores de tipo: selecciona todos los elementos HTML que tienen el nombre de nodo y la sintaxis dados elemento.

Nota: Selector universal

no tiene efecto sobre la especificidad.

Si varias declaraciones de igual detalle, como un selector de clase y un selector de atributos, se pliegan en el mismo elemento, la última declaración (es decir, la declaración mencionada más adelante en la hoja de estilo) se aplicará a ese elemento.

En CSS, válido significa que solo se debe aplicar un valor de propiedad válido al 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.

Si bien es más fácil seguir muchas reglas de granularidad cuando se combinan valores de propiedad, usar !Properties se considera una mala práctica. Esto se debe a que rompe la cascada natural de hojas de estilo, lo que hace que sea mucho más difícil mantener y depurar su sitio.

Sin embargo, hay casos de uso específicos donde ¡Importante es ideal! Uno de esos casos de uso es la definición de clases de utilidad, como una clase de botón.

Suponga que desea que cada elemento al que apunta una 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á el siguiente código para hacer que el enlace parezca un botón.

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

Aquí está el código 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 Un ancla con la clase de un botón.de Christina Perricone (@hubspot ) enCódigoPen

.

Suponga que está constantemente construyendo su sitio web. En algún momento, agrega una nueva sección al código HTML con el identificador «contenido». 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 identificador «contenido» para que tengan un marco 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 código 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

. Dado que el selector de ID es más granular que el selector de clase, el estilo CSS del selector # contenido un tiene prioridad sobre el estilo CSS del selector.botón

. Por lo tanto, el segundo elemento tiene un borde azul sólido, no un negro sólido.

Tal escenario es inevitable, ya sea que esté construyendo su sitio desde cero o utilizando un marco como Bootstrap CSS. Cuanto mayor sea el volumen de código con el que trabaje, más difícil será realizar un seguimiento de los detalles de los selectores de CSS.

Puede evitar las inconsistencias de estilo en el escenario anterior en su sitio usando la propiedad Importante. Veamos exactamente cómo usar esta propiedad a continuación.

Cómo usar Importante en CSS

 
   element {
style property !important;
}

Uso Una regla importante en CSS es fácil. Sólo tienes que añadir Importante al final de la línea, justo antes del punto y coma. Así que la sintaxis se verá así:

¡Echemos un vistazo a cómo cambia el CSS para el ejemplo anterior cuando se agrega una regla importante!

Un ejemplo importante de CSS

En este ejemplo, desea que cada elemento al que apunta 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 el nombre de ID. Los elementos con este nombre de identificación tendrán un borde azul sólido en su CSS. Dado que los selectores de ID son más específicos que los selectores de clase, estos elementos de anclaje tendrán un estilo de botón con un fondo naranja y un color de fuente blanco, pero tendrán un marco azul sólido en lugar de negro.

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

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

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;
}

CSS se convierte en:

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

.

Notarás ambos artículos. se ven idénticos gracias a la importante regla.

Importante CSS no funciona

Suponga que usa la regla !Important en su CSS, pero los elementos no tienen el estilo que desea. Hay solo unas pocas razones por las que la regla válida no funcionará. 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 propietaria es proporcionada por el autor del sitio web. La hoja de estilo del usuario es proporcionada por el usuario del navegador.

De forma predeterminada, las reglas CSS de la hoja de estilo del autor anulan las de la hoja de estilo del usuario. Sin embargo, para crear un equilibrio entre autores y usuarios, las reglas importantes de la hoja de estilo del usuario anularán las reglas importantes de la hoja de estilo del autor. Esta función CSS se diseñó teniendo en cuenta la accesibilidad. Los usuarios que necesitan fuentes más grandes, ciertas combinaciones de colores u otros requisitos debido a una discapacidad visual pueden mantener el control de la presentación del sitio web.

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

Hay dos formas de anular la etiqueta Importante en CSS. Puede agregar otra regla CSS con la etiqueta Importante y usar un selector más granular. ¡También puede agregar otra regla CSS con la etiqueta! Importante usar el mismo selector y simplemente agregarlo más tarde en la hoja de estilo.

¿Por qué funcionan estos dos métodos? Debido a las reglas de especificidad. En caso de que se apliquen dos declaraciones usando la regla !Válida a un mismo elemento, se aplicará la declaración con mayor precisión o la definida en último lugar. Puede que recuerde estas reglas de la introducción, pero es importante comprender que se aplican a las declaraciones que usan la regla !Important así como a las declaraciones que no usan la regla.

En lugar de reemplazar la propiedad Importante en CSS con otra propiedad Importante, es mejor reescribir la regla y evitar usarla por completo. Pero a veces no es posible.

Tome las hojas de estilo del usuario, por ejemplo. Mediante el uso de la hoja de estilo de usuario personalizada, el lector puede anular los estilos del sitio según sus deseos. Por ejemplo, el lector puede aumentar el tamaño de la fuente o cambiar el color de la tipografía en la página para ver mejor el contenido.

Dado que la hoja de estilo definida por el usuario reemplazará la hoja de estilo del autor independientemente de los detalles, el lector puede agregar reglas CSS sin la etiqueta ¡Importante!. Sin embargo, si la hoja de estilo del autor usa una regla importante para definir el tamaño o el color de la fuente, entonces se necesitará la regla válida 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 reglas válidas aplicadas a una clase de botón. Pero ahora quiero todos los artículos. con el nombre de identificador «contenido» tenía un borde azul sólido.

Debería volver a escribir el código, eliminando todas las etiquetas importantes de mi CSS. Pero digamos que tengo una crisis de tiempo y estoy buscando una solución rápida. Entonces podría agregar la etiqueta Importante al selector de ID de CSS. Entonces ambas declaraciones usarían la propiedad Importante, y dado que los selectores de identificadores son más granulares 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>

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;
}

CSS se convierte en:

El resultado es: ver la pluma Ejemplo de sustitución 1. Regla importantede Christina Perricone (@hubspot ) enCódigoPen

.

Las reglas importantes básicamente se anulan. Así, dado que el selector de ID tiene mayor especificidad que el selector de clase, el segundo elemento tiene un borde azul sólido, no un negro sólido.

También puede evitar esta importante regla utilizando un selector de CSS con la misma especificidad, pero colocándolo más tarde en la hoja de estilo.

Supongamos que quiero que todos los botones de mi sitio tengan un borde azul. Una vez más, debería volver a escribir el código, pero puedo usar la etiqueta Importante para corregirlo rápidamente. Usando el mismo selector de clase .btn con una nueva regla para un borde azul sólido y una etiqueta Importante, simplemente puedo agregarlo después de la regla existente en la hoja de estilo. Como viene más tarde, tiene más especificidad y se aplicará a 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>

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;
}
.button {
border: 4px solid #00A4BD !important;
}

CSS se convierte en:

Aquí está el resultado: ver la pluma Ejemplo de sustitución 2. Regla importantede Christina Perricone (@hubspot ) enCódigoPen

.

Uso!Propiedad importante en tu CSS

Si bien es importante, las declaraciones rara vez deben usarse en el código, aún debe comprender qué es esta propiedad y cómo usarla. Es posible que necesite usar una regla importante en sus hojas de estilo de usuario. Tal vez se haga cargo de un sitio web que contiene instancias de reglas. Independientemente de la razón, la comprensión es un paso útil para aprender HTML y CSS.