5.1.1. —perdido, buscando el diseño ideal

!important

En CSS, !important funciona como una palabra clave para ignorar las reglas de cascada y especificidad. Cualquier definición que vaya acompañada de un !important tendrá mayor importancia que cualquier otra aunque esta última sea más especifica.

Fijensé que se coloca justo antes del ; que finaliza la definición.

p {
  color:green !important;
  color:red;
  }

En este caso, normalmente el texto debería ser de color rojo (porque color: red, al aparecer después de color: green, debería rectificarlo), pero !important obliga a que se ignoren las reglas de cascada (y el texto se mantiene verde). Ejemplo 1

Como dije antes, !important tiene mayor importancia que selectores más especificos.

p {
  color: green !important;
  }
  
p#foo {
  color: red;
  }

En este caso, un simple selector de elementos le gana a un selector de ID. Ejemplo 2

Más importante que !important

Cuando dos !important se enfrentan, se respetan reglas de cascada y especificidad.

p {
  color: red !important;
  color: green !important;
  }

En este caso, se respetan las reglas de cascada y la segunda definición reemplaza a la primera. Ejemplo 3

p {
  color: red !important;
  }

p#foo {
  color: green !important
  }

En este caso, se respetan las reglas de especificidad y la segunda definición reemplaza a la primera. Ejemplo 4

Otro hack: !important en Internet Explorer 6 y anteriores

Hasta la versión 6 inclusive, Internet Explorer ignora esta regla y considera a cualquier definición que incluya !important como una definición más.

p {
  color: green !important;
  color: red;
  }

Sólo en Internet Explorer 6 y anteriores, el texto será rojo. Ejemplo 5

Se supone que !important será implementado correctamente en Internet Explorer 7. The Web Standards Project: !important Fixed in Later IE7 Releases

Cuándo usarla

Como hemos visto, !important es demasiado poderoso, y un uso indiscriminado en la hoja de estilos puede llevar a un tremendo caos (por perder la cuenta de dónde habrá declarado alguno).

Los mejores usos que se les puede dar (dejando de lado el tema de hojas de estilos de usuarios) serían:

• Cuando estamos seguros de no querer que cierta definición sea reemplazada.
• Al momento de resolver errores en el renderizado. Si alguna propiedad está molestando y no sabemos dónde fue declarada, se puede probar redefinirla siempre. Por ejemplo, ¿algún elemento muestra un extraño margen? * {margin: 0 !important} para asegurarnos que no hemos dejado alguna declaración olvidada en otro lado.