¿Cuándo tiene sentido usar CSS3 en lugar de JavaScript? ¿Y un marco JS?

Respuesta corta: donde sea que puedas.

Respuesta larga:

Básicamente cualquier cosa que pueda hacer con CSS sin tener problemas de compatibilidad que no debería hacer con JS, esto incluye animaciones simples que se pueden hacer con transiciones / fotogramas clave.

El principal problema con css es la falta de eventos, aparte de: pasar el mouse y un par de otros pseudo selectores que realmente no puedes controlar cuando las cosas deberían o no suceder, por lo que generalmente tienes que recurrir a JS. Pero incluso entonces, debe intentar mantener el estilo a través de JS al mínimo tanto como sea posible. Entonces, si desea agregar estilos a un div si se hace clic, por ejemplo, no cree una función de clic y luego agregue estilos directamente al div dentro de la función. En su lugar, simplemente agregue una clase dentro de la función y aplique los estilos que desee en el CSS. Entonces en lugar de:

$ (‘div’). click (function () {
$ (this) .css (‘color’, ‘rojo’);
});

hacer esto:

$ (‘div’). click (function () {
$ (this) .addClass (‘clic’);
});

/// CSS

.clicked {
color rojo
}

Puede que no parezca un gran problema en este ejemplo, pero si hay muchos estilos que entran en la clase ‘clicada’, entonces las cosas pueden ponerse realmente desordenadas si confía exclusivamente en JS.

Con respecto a CSS sobre Javascript, uno de los mejores lugares para usar CSS en lugar de JS es con animaciones simples en su interfaz de usuario. CSS es un lenguaje completamente declarativo, y la codificación declarativa es generalmente más fácil, a menos que tenga una animación que sea demasiado compleja para escribirla declarativamente. El flujo de trabajo simple es diseñar la animación en CSS y usar Javascript para codificar la lógica para cuando se active la animación. Sin embargo, para animaciones muy complejas, donde hay una gran cantidad de comportamiento dinámico, a menos que sea un experto en CSS, y prefiera hacer todas las animaciones en CSS, es mejor mover toda la lógica de animación compleja a Javascript (más fácil con bibliotecas como Velocity. js y GSAP). Una vez que la API de animación web se agregue completamente en todos los navegadores modernos, podrá realizar animaciones declarativas en Javascript mientras puede utilizar las complejas características imperativas de un lenguaje de programación completo como JS.

Sin embargo, nuevamente, si sus animaciones son relativamente simples de implementar, SIEMPRE use CSS. Es altamente eficiente, así que no crea mentiras de que las animaciones CSS son más lentas que las animaciones Javascript.

Además, no use jQuery para cosas para las que CSS está diseñado. La mayoría de sus animaciones básicas (e incluso las más complejas, si sabe lo que está haciendo …) se pueden hacer diseñando la animación en CSS y luego llamando a esa animación con unas pocas líneas de JS de vainilla. Cargar toda la biblioteca jQuery para algo tan básico es una tontería, incluso si hace que escribir la lógica de animación sea un poco más fácil.

Hay muchos casos en los que puede aplicar directamente CSS3 sin excavar en JS o Dios no permita jQuery. Creo que, en primer lugar, utilizar las posibilidades nativas de HTML5 y CSS3 es el primer paso para la optimización del código. Por ejemplo, herramientas como transiciones CSS3, animaciones, :before y :after pseudo elementos le permitirán crear fantásticos menús desplegables, pestañas y otras cosas sin tocar una sola línea de código JS. Hay muchos tutoriales en la red para que pueda aprovechar estas funcionalidades.

¡Uno de ellos es que no necesitas JavaScript para eso!

Por otro; está esta portuguesa Mary Lou, autora en Codrops, que es una de mis instructoras CSS3 favoritas en la red. Son muy creativos e inspiradores. Recomiendo encarecidamente estudiar sus obras. Una cosa que me inspiró fue el ejemplo de entrada de formulario, incluso incluyendo la validación de que no hay JS en el siguiente ejemplo.

Cuadro de entrada Prueba # 1

More Interesting

¿Qué es exactamente el inicio de sesión social? ¿Cuáles son las consecuencias para el procedimiento de registro de mi sitio?

¿Es posible aprender rieles con videos v4.2 en V5.0 instalados? ¿Cuáles son las diferencias?

¿Cómo encontrar los datos de origen para raspar para una tabla dinámica como en este sitio web? ¿Dónde necesita hacer clic en un botón para completar la lista? ¿Qué puedo hacer para que la tabla aparezca rellenada previamente para un programa que recupera datos web de páginas?

Cómo utilizar la solicitud GET http AngularJS para solicitar datos de un controlador de recursos CRUD de Laravel

¿Cuáles son las mejores empresas de diseño web en Melbourne?

Cómo pasar por un proyecto masivo de MVC existente

Cómo cargar la página con vista

¿Hay alguna forma de servir mi página web en la web de forma gratuita con un dominio personalizado?

¿Es cierto que los desarrolladores de backend tienen mejores habilidades técnicas que los desarrolladores web o móviles frontend?

¿En qué se diferencia Twitter Bower de NPM?

Discovery Engines: ¿Cómo puedo construir un sitio como StumbleUpon?

Como desarrollador web, quiero aprender las posibles vulnerabilidades en mi sistema. ¿Cómo puedo aprender hacking web como desarrollador web?

¿Qué lenguaje de programación será mejor para codificar a los gigantes como Facebook, Twitter, Wikipedia, etc.?

¿Angular 2.0 es una buena opción para el desarrollo de sitios web?

¿Cuánto tiempo lleva aprender el desarrollo y qué debo aprender?