¿Deberías realmente mantener tus js, html y css separados?

Escucho / leo todo el tiempo que es más limpio mantener tus js , html y css separados. Supuestamente hace que sea más fácil de mantener, depurar. Supuestamente es más eficiente, ya que permite el almacenamiento en caché / minificación de archivos css y js .

En lo que a mí respecta, usando marcos web (Django, Rails, ...), bibliotecas de plantillas de JavaScript, ... tiendo a dividir bastante una sola página html en múltiples plantillas reutilizables, algún tipo de widgets si lo desea . Por ejemplo, puedo tener un widget de fuente de noticias , un widget de selección múltiple , etc., cada uno de ellos con un diseño coherente en las diferentes páginas, y cada uno controlado por su pieza de javascript.

Con esta organización, que me parece lo más limpia posible, maximizando la reutilización, tengo problemas para entender por qué sería más simple mantener todos los js y css en archivos separados. Creo que sería mucho más simple, por ejemplo :

en el archivo de selección de múltiples widgets

• html
• diseño css básico
• control de interacciones directas y mejoras de UX con un poco de JS.

Creo que de esa manera es más reutilizable, mucho más fácil de mantener, porque no tiene que desplazarse por un archivo js gordo , luego cambiar y desplazarse por un archivo css gordo , vuelva a cambiar a su archivo html ... de un lado a otro .

Entonces me encantaría saber cómo organizan su código, si se apegan a la separación que generalmente se recomienda.

• ¿Hay realmente buenas razones para hacerlo?
• ¿No es que las guías en la web generalmente asumen que no usarás ninguna herramienta sofisticada (en cuyo caso me encantaría obtener lecturas en línea más actualizadas para las mejores prácticas)?
• ¿Es solo una cuestión de preferencia?

Mantengo esta estructura

Para cada página o control, le doy una carpeta para su página html (o aspx, o php, etc.). En esa carpeta también hay carpetas para js, xml, imágenes y archivos css. Esos son para recursos específicos de página / control, no compartidos.

En la raíz del sitio, también se encuentran las carpetas js, xml, images y css, cada una de las cuales contiene recursos de todo el sitio.

Los archivos js y css del sitio se acumulan en el lado del servidor y se devuelven como un solo archivo js. Las páginas específicas, ya que generalmente solo hay una por página, se dejan solas.

Esto organiza mis recursos en cuanto a su alcance. Y aunque puedo tener una docena de archivos js en la carpeta raíz js, se devolverán como un recurso js combinándolos y minimizándolos del lado del servidor (y almacenando en caché el resultado).

Tampoco estoy cargando recursos específicos de pagex cuando estoy en pagey. El único "desperdicio" podría estar en el archivo de recursos de todo el sitio, pero como está almacenado en caché y muchos de los recursos SERÁN utilizados en múltiples lugares, es más eficiente.

generalmente la convención es tener archivos separados para JS / CSS / HTML para mantener una separación de contenido, presentación y comportamiento. Sin embargo, si la velocidad se convierte en un problema, entonces todo vale.

en el archivo de selección de múltiples widgets

• html
• diseño css básico
• control de interacciones directas y mejoras de UX con un poco de JS.

Tengo una herramienta de organización ( Trinidad ) que promueve que hagas eso.

Excepto que el archivo de widget se divide en 3 archivos pequeños, HTML, CSS y JS. Esto significa que tiene sus archivos separados pero todavía están vinculados.

Esto evita el problema de los archivos pesados, pero aún así le da archivos separados.

Entonces, simplemente separando las preocupaciones no significa que deba tener un gran archivo HTML / CSS / JS. Debe tener múltiples tripletas de <HTML, CSS, JS>todo su código encapsulado reutilizable

Ahora no hay nada de malo en tener todo esto en un archivo siempre que estén claramente separados.

Entonces, un widget que se parece

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

Está bien y genial. Excepto que tener todo en uno de los archivos hace que sea demasiado fácil para un mantenedor comenzar a mezclar y combinar CSS / JS / HTML.

Hace que sea demasiado fácil para que se convierta en espagueti con el tiempo.

La razón principal por la que las personas promueven archivos separados es doble

• descargas separadas. Tan pronto como copie y pegue cualquier código css / js en múltiples "widgets", debe incluirlo en su propio archivo.
• Previene agresivamente el código de espagueti al no confiar en el autor para mantener sus css / js / html bien separados en un solo archivo