¿Hay alguna razón para que no maneje todas mis consultas receptivas con JavaScript?

La primera razón es que debe aplicar las mejores prácticas, a menos que tenga una muy buena razón para no hacerlo. Usar JavaScript para consultas receptivas es una mala práctica . CSS es para diseño y estilo de documentos. JavaScript es para manejar eventos y comportamiento.

Cada vez que usa JavaScript para influir en el estilo, programa un controlador de eventos para establecer una clase CSS. Poner estilo en sus scripts genera problemas de mantenimiento. En general, no hay una razón persuasiva por la que desee codificar un controlador de eventos para manejar eventos de tamaño de ventana gráfica, cuando el navegador ya tiene un mecanismo muy eficiente.


La segunda razón es el orden de carga de la página y el evento listo para DOM. Los navegadores no están optimizados para su escenario.

Cuando un navegador carga su página, primero se carga HTML. La página no se pinta hasta que se hayan cargado y analizado todos los CSS y JavaScript en . CSS y JS bloquean la carga de la página. Por esta razón, es una buena práctica incluir sus recursos de JavaScript en el pie de página de una página, o cargarlos de forma asincrónica. A veces, ambos, según la funcionalidad que proporciona JS. CSS no se carga de forma asíncrona, ya que es esencial para el diseño y el estilo del documento.

Supongamos que colocaría solo las funciones de JavaScript de consulta de medios en la sección de encabezado. Tendría que esperar el evento listo para DOM antes de que pueda averiguar algo sobre las dimensiones de la ventana gráfica. En otras palabras, tendría que esperar hasta que todo HTML, CSS y JS se cargue y analice. CSS mediaqeries tienen la ventaja aquí. Después de cargar CSS, su navegador lo analizará y decidirá qué reglas aplicar.

Para estar seguro, nunca he probado cuán grande es la diferencia en realidad. Pero sería una tontería ignorar eso, ya que optimizar la carga de la página a menudo es un proceso de tomar pequeños aumentos y unirlos.

Estoy respondiendo aquí en parte porque tengo curiosidad por cómo responden otras personas.

Se me ocurren varias razones para no manejar todas las consultas receptivas con JavaScript, aunque no estoy convencido de que sean relevantes.

  1. En 2016, no creo que tener JavaScript deshabilitado sea realmente una preocupación; sin embargo, esta sería una razón válida para usar consultas de medios CSS.
  2. Las consultas de medios CSS pueden ser más útiles para la accesibilidad, aunque no estoy seguro de cómo interactuaría con un diseño receptivo.
  3. Por diseño, CSS está sobrecargado por hojas de estilo ejecutadas en el navegador por el usuario, para que puedan compensar el daltonismo o lo que sea. Nuevamente, no creo que nadie use hojas de estilo basadas en el navegador.
  4. Personalmente, solo uso Bootstrap o Foundation, y luego no tengo que preocuparme por los detalles.