El uso de !important en CSS

Important es una palabra reservada dentro de CSS, con el pasar de los años su uso se popularizo considerablemente, principalmente desde que Internet Explorer comenzó a reconocer su implementación desde su versión 7. Lamentablemente Important es utilizado de manera exagerada, innecesaria y casi automática por muchos diseñadores y programadores.

¿Como funciona !important?

!important es una de las pocas palabras reservadas en el mundo de las hojas de estilo, su utilización se encuentra directamente relacionada con la prioridad de las declaraciones CSS.

como utilizar important CSS

Cuando ingresamos a un sitio se aplican tres hojas de estilo: la del navegador, la del usuario y finalmente la creada por el diseñador.

  • La hoja de estilo del navegador es la primera que se interpreta, son los famosos estilos por defecto que con el tiempo los diseñadores se dedicaron a eliminar mediante el uso de los conocidos estilos del tipo reset.
  • La hoja de estilo del usuario, que es muy poco empleada pero que existe, es una hoja de estilo creada por el usuario y que se aplica de forma automática a todos los sitios que visitamos. Esta implementación existe más que nada por una cuestión de accesibilidad, imaginen el escenario en el que una persona con visibilidad reducida accede a los sitios y desea automáticamente aumentar el tamaño de la fuente o el contraste.
  • La hoja de estilo definida por el diseñador. Son los estilos que genera el creador del sitio web, los que comúnmente manipulamos nosotros mismos a la hora de construir un sitio.

Si aplicamos la lógica el orden en que se aplican las hojas de estilo es la siguiente:

CSS Navegador -> CSS Usuario -> CSS Diseñador.

Todo esto se traduce, finalmente, en que las hojas con menos prioridad son las que primero se ejecutan ya que muchas de las propiedades son sobrescritas, dicho esto las hojas de estilo del diseñador son las que potencialmente más prioridad tienen.

Como se darán cuenta la prioridad es uno de los principios fundamentales por los que los estilos son aplicados y es justamente lo que !important permite manipular, ya que si a una declaración se le agrega la palabra clave !important al final podremos controlar la prioridad.

Ejemplo de uso de !important

Siempre es más claro un ejemplo para entender como funciona algo.

Si tenemos un párrafo en el que aplicamos dos veces una misma propiedad (no lo hagan) vamos a ver que la propiedad que finalmente se aplica es la ultima que escribimos:

.p1{
    color: green;
    color: blue;
}

El texto del ejemplo finalmente tendrá el color azul. Pero si queremos cambiar la prioridad simplemente agregamos la palabra clave !important de la siguiente manera:

.p1{
    color: green !important;
    color: blue;
}

El resultado final será un párrafo de color verde.

Utilizar !important es de lo más sencillo, en el ejemplo pueden apreciar lo fácil que es. Muchos se darán cuenta que el ejemplo repite una propiedad, algo que si bien funciona no es correcto hacer, y es justamente uno de los motivos de esta entrada.

Problemas de utilizar !important

El uso de important! puede ocasionar algunos problemas, como pudimos ver en el ejemplo que algo funcione no significa que este bien.

important css los problemas

Muchas veces el uso de important esta directamente relacionado con una mala estructura CSS o HTML, que bien se podría solucionar con un mejor empleo de las distintas técnicas. Cuando analizamos con precisión las veces que utilizamos important nos daremos cuenta que pudimos haber evitado emplear esta palabra reservada.

!Important es de gran ayuda en el mundo real, es decir con proyectos con cientos de lineas CSS que difícilmente podemos aislar para solucionar el problema de forma correcta. Sin embargo mi recomendación es usarlo en casos extremos. Otro problema que deviene del uso de important! es el relacionado al mantenimiento del código.

¿Nunca les ocurrió que intentan modificar el aspecto visual de un proyecto y por más que lo intenten no hay caso, cuando finalmente encuentran el problema encuentran la palabrita mágica?

Cuando conviene utilizar !important

Una forma aceptable de utilizar !important es la propuesta por Chris Coyier, es decir en clases de utilidad, por ejemplo un botón.

Cuando utilizamos una clase para definir un elemento de uso común como es un simple botón, utilizar important es especialmente útil porque nos previene de cualquier conflicto con otras propiedades dentro de nuestras hojas de estilo, garantizando en gran medida una perfecta visualización.

.button {
    background: red !important;
    color: white !important;
    padding: 3px !important;
    border-radius: 5px !important;
    border: 1px solid black !important;
    text-decoration: none !important; 
}

Otro ejemplo citado de Chris Coyier es utilizarlo para la popular clase clearfix que aparece en prácticamente todos los diseños.

Emplear !important en este tipo de clases de utilidad nos asegura un comportamiento absoluto en todo nuestro diseño.

Conclusión

Utilizar !important es muy útil, pero hay que hacerlo con precaución, su uso desmedido puede traducirse directamente en un mal diseño.

Entiendo perfectamente que en casos de la vida real sea muy difícil evitarlo, sin embargo, siempre que sea posible podemos intentarlo mediante un esfuerzo adicional.

Si se encuentran interesados en leer más acerca del funcionamiento interno de CSS, les recomiendo leer completo este articulo sobre la prioridad de las declaraciones CSS.

Categorizado en: