CSS !Importante: Qué es y Cuándo Usarlo

¿Qué es CSS importante?

La propiedad !important en CSS indica que cualquier regla a la que se adjunte tiene prioridad sobre otras reglas. Es la máxima prioridad para el elemento y el 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 que está 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 para !important se ve así:

Lo principal que hay que recordar con !important es doble:

1. la palabra importante siempre debe ir precedida de un signo de exclamación (!)
2. el punto y coma siempre debe estar 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 de espagueti de lo que está anulando 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 rotundo sí. Otras veces, es un no duro y rápido. Veamos algunas de las mejores prácticas con CSS importantes para saber cuándo es probable que no rompa 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. Tal vez desee que el encabezado del título y la metainformación de sus blogs tengan una fuente y un color diferentes a los 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 el sitio predeterminado en sus archivos .css o en el personalizador de temas de WordPress .

Puede cambiar los elementos individuales que desee (título de la publicación del blog y metainformación) con las clases. título de entrada y .post-meta. Y dado que desea que aún hereden algunos de los estilos de los padres h1 y p , usará h1.entry-title y p.post-meta para llamarlos específicamente.

Tener estos fragmentos en la misma hoja de estilo hará que el código principal tenga efecto en todos los casos, excepto cuando se muestren los títulos de las publicaciones y el metadato de las publicaciones. La propiedad importante de CSS anula el valor predeterminado y le permite tener un control preciso sobre él.

Este tipo de personalización individual es el uso principal de !important . Pero no el único.

Use CSS importante para proteger clases, ID y elementos

También puede usar !important para preparar para el futuro varios elementos de su página, que un mayor desarrollo en el sitio podría modificar de manera inesperada. Podría, por ejemplo, desarrollar un estilo particular para los cuadros de suscripción o las inscripciones 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 se necesite una mano deliberada para cambiar el estilo de sus formularios o botones.

Simplemente nombre el elemento con una clase o ID, y luego ponga !importante en todas y cada una de las líneas.

¡Voila! Preparado para el futuro a partir de cambios regulares en sus hojas de estilo.

Uso de 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 dejamos de codificar a mano 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 estilo CSS en línea.

Esto es importante por un par de razones. La primera es que puedes controlar cualquier línea de código en tu página específicamente usando style=”x:y!important;” y la segunda es que puede anular cualquier CSS que ya se haya aplicado a esa página. Incluso si ese valor también tiene !important . Por ejemplo:

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 represente.

Cuidado con apilar etiquetas importantes

Tomemos esos dos últimos ejemplos y emitamos una advertencia. Este tipo de usos están bien en pequeñas dosis. Puede usarlos en situaciones únicas, y probablemente nadie tendrá problemas con eso. Porque, como caso único, ha utilizado específicamente !important para aplicar estilo a un elemento individual. Que es para lo que 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 múltiples problemas en el mismo sitio, ese es el comienzo del código de espagueti. Especialmente para futuros desarrolladores que no eres tú. Si bien es posible que le resulte difícil determinar el orden en que se representan los elementos importantes , es posible que a un futuro desarrollador le resulte imposible.

Lo que sucede finalmente es que hay tantos !important 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 muestra. Y a veces, incluso algo marcado como !important no se muestra. O peor aún, todos los cambios posteriores deben marcarse como importantes solo para que se muestren, a menos que desee derribar el estilo del sitio y reconstruirlo nuevamente.

Terminando

CSS importante es honestamente una de las herramientas más poderosas en el conjunto de herramientas de un diseñador. Puede ajustar fácilmente cualquier elemento de su sitio sin preocuparse de afectar a los subordinados o compañeros. Pero si lo usa en exceso, 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 configurar como predeterminado. Así que trate de usar !important con moderación, de modo que cuando necesite algo que destaque o esté preparado para el futuro, lo esté haciendo de la manera correcta.

¿Cómo te sientes acerca del uso de CSS !importante en tus proyectos?

Imagen destacada del artículo por wan wei / shutterstock.com