!Important: ¿Qué es y cuándo usarlo?

La propiedad de CSS !Important resulta ser una herramienta muy poderosa cuando es usada correctamente. Hoy hablaremos sobre que es la propiedad de CSS !Important y veremos las mejores prácticas para que tu código se mantenga siempre limpio.

Tiempo de lectura estimado: 5 minutos

Índice

¿Qué es !important?

Es una propiedad que indica que cualquier regla a la que sea añadida es precedente sobre las demás reglas. Es decir, 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 de la página web.

En la mayoría de los casos, eso significa anular el estilo predeterminado para el website 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. De modo que puedes usar la propiedad en algunas partes de un fragmento, pero no en todas. El código CSS se ve así:

.example-class {
    color:#fff!important;
}

Debes tener en cuenta dos requisitos para usar !important:

1. La palabra important debe estar precedida por el signo de exclamación (!).
2. El punto y coma debe estar al final de la línea, luego de la propiedad.

Esta propiedad incluso se puede usar página por página o módulo por módulo (en el caso de builders como el de Divi), si lo deseas, aunque así es como se comienza a enredar el código al no saber sobre qué elemento, en qué página y en qué orden estás estableciendo prioridad.

Es importante tener las mejores prácticas con esta propiedad, para tomar buenas decisiones. Por ejemplo, a veces un diseñador debe decidir si vale la pena hacer que algo prevalezca sobre el estilo por defecto de la web y cuándo es mejor no hacerlo.

Veamos cómo tomar buenas decisiones en el uso de !important.

Cuándo usar !Important

La forma más común de usar esta propiedad es cuando quieres una clase interactúe con un selector primario que tiene un estilo diferente. Por ejemplo, si tienes un encabezado y metainformación en tu blog que debe verse diferente del resto de las fuentes y colores de tu web.

El estilo por defecto es heredado del H1 y los selectores p de tus archivos .css. Cualquiera que sea el estilo que determinaste se verá en tu archivo .css o tu WordPress de una forma similar a esta:

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

Debes cambiar los elementos individuales que quieres, en este caso sería el título y la metainformación con las clases .entry-title y .post-meta. Pero como aún necesitarías que herede algunos de los estilos del H1 y p, debes usar h1.entry-title y p.post-meta para indicar a estos específicamente.

h1.entry-title, p.post-meta {
    color: white!important;
    font-family:'Poppins'!important;
}

Tener estos snippets en la misma hoja de estilos hará que el código principal tenga efecto en todos los casos excepto cuando el título y la meta-información son mostrados. Esta propiedad reemplaza a las que están por defecto y solo de la forma en la que lo indicaste.

No es la única forma de personalizar con !important, veamos más.

Para proteger clases, IDs y elementos

Con !important puedes asegurar para el futuro varios elementos de tu página, para evitar que durante el desarrollo se modifique algo importante en el estilo.

Por ejemplo, los formularios de suscripción y opt-ins en tu página web heredarán el estilo que esté en la hoja de estilo de cada lugar. Con esta propiedad puedes fijarlos y hacer que para modificarlos se requiera una intervención deliberada y no una modificación por defecto. Solo debes nombrar el elemento, clase o ID y poner la propiedad al final de cada línea.

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

Para usar estilos en las líneas

Puedes usar esta propiedad si utilizas Gutenberg o el editor clásico de WordPress, puedes entrar en el HTML y usar !important en el estilo CSS.

<div class="special-paragraph" style="color:#blue!important;">
    <p>This text will show up blue now!</p>
</div>

Incluso si hay algún CSS aplicado en la página, puede prevalecer el que acabas de indicar. También puedes controlar cualquier código en tu página bajo este método, usando style=”x:y!important;”. Incluso si hay algún estilo HTML usando la propiedad en el mismo selector, usarla en la línea del CSS indica específicamente el párrafo que seguirá la regla.

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

Recomendación

Esta es una herramienta que debe usarse con cuidado. Los tipos de usos que mostramos anteriormente deben tomarse con calma y con muchísima conciencia, ya que !important debería darle estilo a un elemento en particular para que no cause problemas.

Evita usar este recurso para editar constantemente tu hoja de estilos o como una solución rápida, ya que con esa práctica comienza a complicarse el código y puede ser problemático para ti o para futuros desarrolladores.

Lo que sucede si apilas demasiados !important a lo largo de tu página web, es que el CSS no funcionará correctamente, a veces otro elemento indicado con la propiedad podría no mostrar el estilo o tendrías que ir elemento por elemento e indicarlo con este recurso para que la página web no pierda toda la forma.

Al final de todas formas tendrías que tumbar todo el sitio y volverlo a construir, y no queremos que eso pase.

Nos encanta tener siempre recursos a la mano pero debemos usarlos con delicadeza para construir un trabajo ordenado y eficiente, para nosotros y para futuros usuarios. ¿Ya usas !important? ¡Coméntanos, y nos leemos en la próxima!