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 .