JQuery CSS (reflexiones)

La verdad es que en este blog aunque suelo hablar bastante de JQuery nunca he hablado de temas de CSS que afectan a los diseñadores . Vamos a hacer una excepción con este POST en el que hablaremos de cosas sencillas .Supongamos que tenemos un código tan sencillo como el siguiente.

$("a").click(function(evento) {

 $("p").css("color","white");
 $("p").css("font-size","12px");
 $("p").css("background-color","blue");

 });

Es un código que nos cambia varias características de los párrafos de nuestra página . Muchos diseñadores nos dirán que será mejor hacerlo de esta otra forma .

.estilo {

color:white;
background-color:blue;
font-size:12px;
}

$("a").click(function(evento) {
$("p").addClass("estilo");

});

JQuery CSS

Bueno la verdad es que el código funciona exactamente igual unicamente y queda mejor programado con las css y mas organizado . Ahora bien hay muchas situaciones en las que me he encontrado con la siguiente reflexion . Mira tenemos ya mucho código CSS construido y estamos teniendo problemas  con el selector de clase que acabas de diseñar (.estilo) .No se esta aplicando correctamente .

Esto puede pasar y es mas habitual de lo que parece debido a las capacidades que CSS soporta de herencia . Así pues el resultado suele ser el siguiente . El programador comenta con el diseñador que si no le importa que en vez de estar a nivel de estilo, este a nivel de código inline (usando el método .css() y no addClass()). A nuestro amigo el diseñador no le gustará mucho pero no hay demasiado tiempo para revisar todas las CSS . Asi pues admite que los estilos de este caso “puntual” sean diseñados en Javascript y aparezcan  de forma inline en las etiquetas “p” . La vida sigue …

Hilando mas fino

Lamentablemente la reflexión que hemos hecho no es del todo correcta . Es verdad que el código que tenemos parece que hace lo mismo . Sin embargo hace cosas algo diferentes . Cuando nosotros aplicamos el método .css() de JQuery.

Realmente estamos forzando al motor de render de CSS a redibujar la página 3 veces .

Sin embargo cuando utilizamos el método addClass() de JQuery

Unicamente estamos obligando al motor de CSS a redibujar la página 1 vez ya que aplica el estilo de golpe.

Así pues aunque parecía que el código era identico . La triste realidad es que no lo es ni de lejos y estaremos forzando al motor de CSS mucho mas con la opción inline .