Cuando una tarea se puede realizar mediante Javascript o CSS, ¿es mejor usar CSS? [cerrado]

Siempre veto JavaScript usando CSS tanto como sea posible.

es decir, creo pestañas y botones de desplazamiento utilizando CSS en lugar de JavaScript.

He visto algunas soluciones, específicamente el marco web Wt, que abogan por JavaScript; pero con degradar a CSS si el navegador no es capaz / js-disabled.

Sé que CSS y JavaScript tienen diferentes propósitos, sin embargo, hay superposición; que es el bourne de esta pregunta.

¿Debo seguir usando CSS tanto como sea posible a través de JavaScript?

Si.

El propósito de CSS es el diseño, apariencia y animaciones

El propósito de JavaScript es la interacción.

Si está haciendo un diseño, use CSS, si está configurando la apariencia, use CSS, si está haciendo una animación use CSS3

Si adjunta controladores de eventos o reacciona a la entrada del usuario, use JavaScript.

Tenga en cuenta que las personas usan JavaScript en lugar de CSS para el soporte del navegador. Hay otras soluciones como emular características CSS usando javascript.

Bueno, esa es realmente una pregunta bastante interesante. Estoy tratando de pensar cómo harías un punto de referencia en algo como esto, especialmente porque la mayoría de las veces ni CSS ni JavaScript harán cosas realmente computacionalmente intensivas en una página web.

Mi instinto me dice que use CSS tanto como sea posible, pero no lo convierta en una regla difícil y rápida.

a:hover {
  background-color: green;
}

es mejor semánticamente entonces

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

PERO

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

Sería difícil (aunque no imposible) en CSS. Podrías hacerlo de esta manera.

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

Esta sería realmente una forma un poco más incómoda de hacer lo que podría haberse hecho directamente en JavaScript, pero lo he estado pensando durante un par de minutos, e incluso aquí, la solución correcta podría ser un CSS, por ejemplo si estabas estableciendo muchos atributos al hacer el desplazamiento.

** Tenga en cuenta que no se espera que ninguno de este código funcione, estos son solo para fines de demostración. **

Considera si quieres lo siguiente de la Red de desarrolladores de Yahoo :

"Después de reducir los números, encontramos una tasa constante de solicitudes con JavaScript deshabilitado que ronda el 1% del tráfico real de visitantes, con la tasa más alta de aproximadamente el 2 por ciento en los Estados Unidos y la más baja de aproximadamente el 0,25 por ciento en Brasil. los otros países evaluados mostraron cifras muy cercanas al 1.3 por ciento ".

Con porcentajes tan bajos (como máximo), parece que no vale la pena (a menos que los usuarios de sus sitios web provengan principalmente de ese 2%) para preocuparse por el caso en que los usuarios tienen su javascript desactivado. El usuario promedio no sabe cómo desactivar JavaScript y probablemente no le importe. Si está desarrollando un sitio web de tecnología, es posible que desee considerar la posibilidad de que hayan deshabilitado JavaScript, sin embargo, si lo han hecho, es probable que estén acostumbrados a que los sitios web no funcionen correctamente, ya que muchos sitios web usan JavaScript en gran medida.

Dicho todo esto, he encontrado muchos casos en los que el desarrollo de JavaScript hace que lo que estoy tratando de lograr sea mucho más fácil y otros casos en que css hace lo mismo.

Al final, cada "idioma" tiene su lugar apropiado en el desarrollo web y, si se usa con prudencia, puede mejorar tanto el desarrollo como la experiencia del usuario. Aprenda cuáles son esos usos (recomiendo experiencia de aprendizaje) y aplique con prudencia. En mi experiencia, establecer reglas básicas como "Nunca use JS cuando exista una solución CSS" (parafraseado) rara vez es mejor en el mundo práctico.

JavaScript es un lenguaje informático real, lo que significa que tiene el estado y el control de la ejecución del programa. Como tal, no hay un límite superior de cuán complejo puede llegar a ser, y cualquier cosa que escriba en él seguramente tendrá un mínimo sustancial de complejidad. CSS es un código descriptivo; su complejidad se limita al nivel de complejidad que puede tener una receta. Por lo tanto, si se puede hacer algo tanto en CSS como en JavaScript, preferiría usar CSS, ya que seguramente será menos complejo.

Javascript es un lenguaje de secuencias de comandos, lo que significa que tiene la capacidad de agregar algo de lógica. CSS se utiliza para describir el aspecto y el estilo de un documento. Fue diseñado principalmente para separar la estructura del documento del formato y el diseño (presentación).

Puede usar Javascript para modificar el aspecto de una página web, pero como CSS estaba destinado a hacer eso, iría con CSS para el estilo del sitio y dejaría el resto a Javascript.

Wikipedia:

Uso de Javascript:

• Abrir o abrir una nueva ventana con control programático sobre el tamaño, la posición y los atributos de la nueva ventana (por ejemplo, si los menús, las barras de herramientas, etc., están visibles).
• Validar los valores de entrada de un formulario web para asegurarse de que sean aceptables antes de enviarlos al servidor.
• Cambio de imágenes a medida que el cursor del mouse se mueve sobre ellas: este efecto a menudo se usa para llamar la atención del usuario hacia enlaces importantes que se muestran como elementos gráficos.

ACTUALIZAR. En cuanto al tercer punto, el W3C dice sobre CSS:

La :hoverpseudoclase se aplica mientras el usuario designa un elemento con un dispositivo señalador, pero no necesariamente lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudoclase cuando el cursor (puntero del mouse) se desplaza sobre un cuadro generado por el elemento.

Uso de CSS:

Antes de CSS, casi todos los atributos de presentación de los documentos HTML estaban contenidos dentro del marcado HTML; Todos los colores de fuente, estilos de fondo, alineaciones de elementos, bordes y tamaños tuvieron que describirse explícitamente, a menudo repetidamente, dentro del HTML. CSS permite a los autores mover gran parte de esa información a una hoja de estilo separada, lo que resulta en un marcado HTML considerablemente más simple.