Ver Mensaje Individual
  #1 (permalink)  
Antiguo 07/02/2014, 03:25
JustinKO
 
Fecha de Ingreso: junio-2012
Ubicación: Madrid
Mensajes: 339
Antigüedad: 12 años, 7 meses
Puntos: 47
CSS vs javaScript

Hola a todos, os voy a hacer una pregunta muy genérica pero que siempre me trae la duda.
Yo en su día aprendí (no sé si erróneamente) que todo lo que se pudiera con css no se haga en javaScript, el caso es que ahora estoy haciendo un menú con tres niveles de navegación en el que se van desplegando los diferentes submenus según estás en la sección seleccionada.

Lo estoy haciendo sin usar javaScript solo con css. Esto que muestro abajo es solo una porción de código de uno de los submenus:

Código CSS:
Ver original
  1. .page-taxonomy-term-212   #menu-cortacesped > ul,
  2.         .page-taxonomy-term-204  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
  3.         .page-taxonomy-term-204 #menu-cortacesped > ul,
  4.             .page-taxonomy-term-170  #menu-cortacesped > ul,
  5.             .page-taxonomy-term-170  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
  6.             .page-taxonomy-term-172 #menu-cortacesped > ul,
  7.             .page-taxonomy-term-172  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
  8.             .page-taxonomy-term-171  #menu-cortacesped > ul,
  9.             .page-taxonomy-term-171  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
  10.             .page-taxonomy-term-173  #menu-cortacesped > ul,
  11.             .page-taxonomy-term-173  #menu-cortacesped #menu-cortacesped-hombre-pie ul,
  12.         .page-taxonomy-term-205  #menu-cortacesped #menu-cortacesped-hombre-sentado ul,
  13.         .page-taxonomy-term-205 #menu-cortacesped > ul,
  14.             .page-taxonomy-term-175  #menu-cortacesped > ul,
  15.             .page-taxonomy-term-175 #menu-cortacesped #menu-cortacesped-hombre-sentado ul,
  16.             .page-taxonomy-term-174  #menu-cortacesped > ul,
  17.             .page-taxonomy-term-174  #menu-cortacesped  #menu-cortacesped-hombre-sentado ul,
  18.             .page-taxonomy-term-176  #menu-cortacesped > ul,
  19.             .page-taxonomy-term-176 #menu-cortacesped #menu-cortacesped-hombre-sentado ul
  20.             {
  21.                 display: block;
  22.             }

Este código habría que multiplicarlo más o menos por 10 (de los otros 10 submenus) , más luego añadirle otros tantos para los li y las a cuando son activas y tal y tal.

No sé si hay manera de simplificar este css, pero la pregunta que os hago es otra:

En un caso como éste que se crea un código tan largo ¿no me merece la pena usar 4 lineas de javaScript cuando el resultado sería el mismo? y ¿cuáles son los inconvenientes de usar un método u otro?

Saludos y espero no haberme extendido demasiado con la pregunta.

Muchas gracias a todos.