La importancia del !important en tu css, for dummies

La instrucción complementaria de CSS más utilizada y apestada. La más polémica y fácil de usar.

¿Que no se pone rojo ése enlace? ¡Pam! le metes un color:red!important y a «cascarla». Fácil. Rápido. Exponencialmente problemático especialmente en proyectos grandes y de más de un «participante».

La tortilla ¿con !important o sin !important?

Yo no conojco a nadie que no use un !important de vez en cuando. De veras, y quien lo niegue, o miente, o está trabajando en un proyecto o equipo donde tienen totalmente prohibido usarlo (por motivos de calidad de software, pero oiga, ésto, se paga).

Si todo está en negrita, nada está en negrita; ergo, si todo es !important, nada es !important

Filemón Pi

Cuando eres más newbie, es fácil caer en el abuso del !important. Yo personalmente, soy defensor y partidario, con mis reservas. Pero esto es una opinión personal, como mi trasero, I mean, todo el mundo tiene uno o una.

El argumento «dev pro number one», sobre por qué no hay que usar !important:

El !important sirve para testear o como medida provisional, una vez pruebas que el estilo está correcto y el elemento te lo «pilla», tienes que quitar el !important y ser más específico con tu regla CSS. Tu nueva regla debe ser más específica que la regla que le precede en la cascada.

Construcciones Nanoblock

Juegos pixel-perfect

#loNecesitas #buildingBlocks #buildCheaper

¡ Sólo 4,90€ !

Ver más

¡Qué cascada, qué dices, qué es la especidad ésa!

Especificidad es la clave. Especidad. Especi… bah. Pongamos un ejemplo que así, se entenderá mejor. Empezaremos por lo básico y luego ya verás cuando vienen los problemas de «exceso de especifi, espefi… picidad»:

// Tenemos aqui que, yo que se, los links, sean azules
a {
  color:blue;
}

// Ahora, tenemos una clase .button, que hace que el enlace tenga forma de botón, y sea fondo azul y coloor, blanco, va.

.button {
  display:inline-block;
  paddding:5px 10px;
  color:white;
  background:blue;
}

// Ojo; esta clase .button ... se la puedo poner también al elemento button, así, haré que todos los botones de mi web, tanto sean links como sean un botón de un form, tengan el mismo aspecto like a boss, no?

// Hostia, pues al link, le voy a quitar el subrayado, cuando sea un .button... podría hacer esta nueva combo-regla

a.button {
  text-decoration:none;
}

// Bueno pues esta es una regla combinada, sin espacios entre elemento y clase y se puede hacer, aunque también son selectores polémicos, pero me sirve para éste tuto.

¿Hasta aquí me sigues, no? Vale pues ya tenemos el estilo de botón azul y tal. Ok, ahora, resulta que… tengo un bloque, un sidebar, un rectángulo, que ya tiene el color azul de fondo. Y quiero poner un botón dentro de este bloque azul. Hostia pero azul sobre azul ño che ve el botón… Ains, vale pues hipotéticamente tendríamos:

.sidebar-box--azul {
  background:blue;
  padding:20px;
}

// digo bueno, pues mi button azul, cuando esté dentro de la caja azul, lo cambiaré de color, hale

.sidebar-box--azul .button {
  background: red; // hale pos rojo
}

Vale pues, ya hemos aumentado la especificidad de la regla CSS, de dos maneras, antes, combinando a.button, y ahora, diciendo «el botón, pero específicamente el que está dentro de la caja azul (buen grupo musical). Ésto es la cascada.

Podemos ser más, y más, y más específicos, imaginad que tenemos una plantilla de página especial, de una landing, donde se sustituye todo lo que sea azul por, pongamos, dorado, porque mira, el cliente o el diseño lo solicita para una acción de marketins o lo que sea. Podríamos hacer unas reglas para esta página fácilmente usando el classname del body de ésa plantilla de página:

.page-template-page-marketing-peich .sidebar-box--azul {
  background: gold; // el dorao es un amarillo muy chulo
  padding:20px;
}

.page-template-page-marketing-peich .sidebar-box--azul .button {
  background: gold; // hale pos dorao
}

Pues ésto que estamos haciendo, es aumentar la especificidad, anidando más clases dentro de otras y estableciendo reglas más complejas, excepciones y tal y tal.

Cuando tienes mucho CSS, es fácil que tengamos que añadir muchas de estas reglas combinadas. Y sobretodo con cualquier CMS + PLUGINS. Porque los plugins de formularios, nuevos bloques, shortcodes que te pintan cosas etc, vienen normalmente con su propio CSS adicional. Y con sus propias reglas específicas para que esas tabs, ese formulario, etc, se vean más o menos bien.

Un diamante sólo puede ser rayado por otro diamante; ergo, un !important sólo puede ser machacado por otro !important (que venga después)

Popeye, ingeniero náutico

Pero claro, reglas específicas por un lado, otras por otro… y te topas con que algunas reglas tuyas, hacen que otros elementos hereden propiedades (colores que no toquen, márgenes exagerados…).

Es cuando, te encuentras en cierta coyuntura (bonito palabro) y ya tienes que escribir reglas tan largas como:

.page-template-page-marketing-peich .main .container .section-deabajo .sidebar-box--azul .wpcf7 label span button {
  background: pink;
  margin:0;
}

// ¡toma regla específica! (las he visto más largas, ejem, sass compilado las hace de más gordas)

// Esto ya no es "cascading style sheets", es "catarating style sheets", los estilos de Niágara

Aquí viene cuando, si tienes que hacer un cambio en el color de este botón de nuevo porque (imaginad motivo random) dices fuah… y si digo esto?

.page-template-page-marketing-peich .button {
  background: gold!important; // FORZAMOS de nuevo el "dorao"
}

En éste último caso, he escrito una regla más corta y menos específica, el navegador debería interpretar la anterior, por su especificidad. Pero como le he puesto el !important por la «face», (de hecho, yo lo denomino así tal cual siempre, «important por la face»), pues hale, mate y machaque.

Que he ahorrado tiempo en husmear y escribir… pues sí. ¿He matado algún gatito? ¿Le he tirado tierra en los ojos a los pobres? ¿A que no? Pues entonces, tengo dos opciones:

1. Lo dejo así que ya va, y me voy por un café
2. Evalúo. ¿Estoy al principio del proyecto, o finalizándolo? ¿Es un proyecto pequeño, o es grande y con probabilidad de continuidad? ¿Es una página personal que sólo toco yo y me la pela todo, o es para un cliente? ¿Está bien pagado este proyecto, como para permitirme ser purista porque lo vale?

Las respuestas de la evaluación, sólo las tienes tú. Pero yo, te voy a dar un criterio extra, que creo que también es muy importante.

Como comentaba, hay reglas tan tan tan largas, que nuestro archivo css se hace ENORME (Imagina 500KB de CSS minificado. Yo lo he visto y tú también seguro). Porque tiene muchas, muchísimas reglas. Y cuenta en 20 palabras casi siempre, lo que se puede contar en 2 o 3. Esto pasará si:

1. Es un proyecto grande, y no dividimos nuestro CSS en varios archivos, por funcionalidades o secciones y somos unos puristas, que «ñunca uchan el inportan ña ña ña»
2. Usamos un preprocesador como SASS, donde es tán cómodo anidar y anidar y anidar. Ja, luego, al compilar el css, las reglas son KILOMÉTRICAS. ¡BAD CODE! Que si minificación, que si tal que si cual, pero, esto, no tiene sentido.

Con Clun Sión

Pues así estamos, yo, si tengo que usar un !important, lo uso. Pero ya he expuesto los motivos que me hacen evaluarlo, si merece la pena o no dejarlo ahí tan fresco. Sobretodo, en esta última parte, espero haberte abierto los ojos, sobretodo en el tema del tamaño del CSS, que es una parte que encuentro que se obvia mucho, en estos tiempos que corren, y se menciona poco en los blogs.

Quiero decir que, la optimización y las buenas prácticas siempre están bien, pero ya ves que, depende de cómo escribas tu CSS, podria ser que incluso no necesitases a posteriori tanto que si minificado, gzip, render blockings y movidas de performance de gromenawers.

Hale, ya me he quedado agusto!important.