CSS! Importante: Qué es y cuándo usarlo
Publicado: 2020-06-27Uno de los elementos más útiles y polémicos de CSS es la propiedad ! Important . Todos los diseñadores se encontrarán con la etiqueta en código CSS en algún momento. La verdadera pregunta y el dilema que surge cuando eso sucede es "¿se usó correctamente?" Debido a que CSS ! Important es una herramienta tan poderosa, los desarrolladores y diseñadores deben conocer las mejores prácticas al usarlo. CSS! Important puede conducir a todo tipo de código espagueti, y eso no es bueno para nadie.
¿Qué es CSS importante?
La propiedad ! Important en CSS indica que cualquier regla a la que se adjunte tiene precedencia sobre otras reglas. Es la máxima prioridad para el elemento y selector con el que se usa y, por lo tanto, permite a los desarrolladores y diseñadores tener un control específico sobre el estilo de partes individuales del sitio. En la mayoría de los casos, eso significa anular el estilo predeterminado del sitio contenido en styles.css o custom.css .
Cada instancia de! Important solo se aplica a la línea específica en la que aparece . Por lo tanto, puede usar la propiedad en algunas partes de un fragmento, pero no en todas. El código CSS de ! Important tiene este aspecto:
.example-class {
color:#fff!important;
}
Lo principal para recordar con ! Important es doble:
- la palabra importante siempre debe ir precedida de un signo de exclamación (!)
- el punto y coma debe estar siempre al final de la línea, después de la declaración! important
! important incluso se puede usar página por página o módulo por módulo (en el caso de creadores de páginas como Divi), si lo desea, aunque así es como ingresa al código espagueti de lo que prevalece sobre qué elemento en ¿Qué página y en qué orden?
Cada diseñador, en algún momento u otro, se encontrará con la etiqueta importante de CSS y tendrá que tomar una decisión. ¿Vale la pena anular el estilo predeterminado del sitio?
A veces, la respuesta es un sí rotundo. Otras veces, es un no duro y rápido. Veamos algunas de las mejores prácticas con CSS que son importantes para saber cuándo probablemente no romperá nada, ya sea ahora o en el futuro.
Cuándo usar CSS Importante
El uso principal (y más ampliamente aceptado) de ! Important es cuando desea que una clase que interactúa con un selector principal tenga un estilo diferente. Quizás desee que el encabezado del título y la metainformación de sus blogs tengan una fuente y un color diferentes al del resto de su sitio. El estilo predeterminado para estos elementos se hereda de los selectores h1 y p en sus archivos CSS. Se mostrará lo que haya configurado para los valores predeterminados del sitio en sus archivos .css o en el personalizador de temas de WordPress.
p {
font-weight: 400;
font-size: 1.1rem;
line-height: 1.7;
color: #111;
font-family:'Roboto';
}
h1 {
margin-top: 30px;
margin-bottom: 15px;
color: #000;
font-family:'Lato';
}
Puede cambiar los elementos individuales que desee (título de la publicación de blog y metainformación) con las clases. entry-title y .post-meta. Y como desea que sigan heredando algunos de los estilos del padre h1 yp , usará h1.entry-title y p.post-meta para llamarlos específicamente.
h1.entry-title, p.post-meta {
color: white!important;
font-family:'Poppins'!important;
}
Tener estos fragmentos en la misma hoja de estilo hará que el código superior entre en vigor en todos los casos, excepto cuando se muestren Post Titles y Post Meta. La propiedad importante de CSS anula la predeterminada y le permite tener un control preciso sobre ella.
Este tipo de personalización individual es el uso principal de ! Important . Pero no el único.
Utilice CSS importante para proteger clases, ID y elementos
También puede usar ! Important para garantizar el futuro de varios elementos de su página, que un mayor desarrollo en el sitio podría modificar de maneras inesperadas. Por ejemplo, podría desarrollar un estilo particular para las casillas de suscripción o las suscripciones de correo electrónico o las incrustaciones de YouTube. Cada uno de estos puede heredar diferentes estilos de sus hojas de estilo en diferentes lugares. El uso de la etiqueta ! Important puede hacer que sea necesaria una mano deliberada para cambiar el estilo de sus formularios o botones.
Simplemente nombre el elemento con una clase o ID, y luego ponga ! Important en todas y cada una de las líneas.
.youtube-embed {
font-family:'Exo'!important;
font-weight: 700!important;
line-height:1.4rem!important;
margin-top:25px!important;
margin-left:auto!important;
margin-right:auto!important
color:#449928!important;
padding:11px!important;
background:#998899;
}
¡Voila! Preparado para el futuro a partir de cambios regulares en sus hojas de estilo.
Usar estilos en línea
Este es uno de esos casos de uso que pueden surgir o no para muchas personas. Solía ser muy común, pero se ha vuelto menos a medida que nos hemos alejado de la codificación manual de nuestras publicaciones y páginas. Sin embargo, si alguna vez profundiza en el HTML de un bloque de Gutenberg o en la vista de texto del editor clásico de WordPress, puede usar absolutamente ! Important con el estilo CSS en línea.
<div class="special-paragraph" style="color:#blue!important;"> <p>This text will show up blue now!</p> </div>
Esto es importante por un par de razones. El primero es que puede controlar cualquier línea de código en su página específicamente usando style = "x: y! Important;" y el segundo es que puede anular cualquier CSS ya aplicado a esa página. Incluso si ese valor también tiene ! Importante . Por ejemplo:
<style>
p {
color:#313373!important;
font-size:2rem;
}
</style>
<div class="special-paragraph" style="color:#blue!important;">
<p>This text will show up blue now, even though there's another !important tag
applied to the paragraph selector on this page!</p>
</div>
Incluso si hay un estilo HTML incrustado usando <style> </style> que usa ! Important en el mismo selector, el CSS en línea que apunta al párrafo específico será el que se renderice.
Tenga cuidado con apilar etiquetas importantes
Tomemos esos dos últimos ejemplos y tengamos una advertencia. Este tipo de usos está bien en pequeñas dosis. Puede usarlos en situaciones puntuales, y probablemente nadie tendrá problemas con ellos. Porque, de forma excepcional, ha utilizado específicamente ! Important para diseñar un elemento individual. Para eso está destinado .
Sin embargo, si comienza a usar ! Important como una muleta, como una forma de evitar editar sus hojas de estilo con tanta frecuencia o como una solución rápida para varios problemas en el mismo sitio, ese es el comienzo del código espagueti. Especialmente para futuros desarrolladores que no sean ustedes. Si bien es posible que le resulte difícil averiguar el orden en el que se representan los ! Important s, es posible que a un futuro desarrollador le resulte imposible.
Lo que sucede eventualmente es que hay tantos mensajes de correo electrónico importantes apilados en todo el sitio que interactúan con múltiples hojas de estilo, páginas y módulos, que el CSS normal rara vez procesa. Y a veces, incluso algo marcado como importante no se representa. O peor aún, ¡todos los cambios posteriores deben ser marcados ! Importante solo para que se muestre, a menos que desee eliminar el estilo del sitio y reconstruirlo nuevamente.
Terminando
Honestamente, CSS important es una de las herramientas más poderosas en el juego de herramientas de un diseñador. Puede ajustar fácilmente cualquier elemento de su sitio sin preocuparse de afectar a sus subordinados o compañeros. Pero si lo abusa, los efectos pueden convertirse en una pesadilla de páginas y elementos que intentan anularse entre sí, y lo que alguna vez fue importante se ha convertido en el predeterminado, pero no se puede establecer como predeterminado. Así que trate de usar ! Important con moderación, de modo que cuando necesite algo que se destaque o esté preparado para el futuro, lo esté haciendo de la manera correcta.
¿Qué le parece el uso de CSS! Important en sus proyectos?
Imagen destacada del artículo por wan wei / shutterstock.com