¿Cuál es la diferencia entre diseñar el sitio web usando JavaScript DOM o CSS?

La diferencia es que uno es correcto y el otro no. Debe evitar diseñar elementos con JavaScript siempre que sea posible. La mejor manera de diseñar elementos programáticamente es con clases, ya que son más fáciles de mantener y razonar, y pueden tener nombres útiles. CSS es para diseñar, JS es para computación, automatización y procesamiento. Es el cerebro.

¿La razón para no diseñar usando JS? Actuación. Acceder al DOM es costoso, y manipular elementos puede ser complicado.

Javascript se aplica más tarde.

Además, la forma preferible (en mi libro) es definir clases CSS y luego aplicarlas estáticamente en HTML, pero si se necesita un comportamiento dinámico (y solo entonces), use Javascript directamente (className) o jQuery (addClass / removeClass).

Tenga en cuenta también que las animaciones CSS eliminan parte de la necesidad de usar Javascript para efectos dinámicos.

Evite agregar estilos explícitamente a través de Javascript (.style), ya que eso hace que cambiar look-n-feel más tarde sea un poco más difícil. Sin embargo, todavía lo uso para, por ejemplo, resaltar errores y demás, cambiando el color del texto o un campo.

Nada en realidad. Todavía estás usando CSS para hacer el cambio de estilo, solo estás apuntando al elemento de manera diferente. CSS es probablemente más simple y más eficiente por sí mismo, pero ambos pueden hacer el trabajo.

CSS funciona cuando JavaScript está desactivado.