Devez-vous vraiment garder vos js, html et css séparés?

J'entends / lis tout le temps qu'il est plus propre de garder vos js , html et css séparés. Soi-disant, il est plus facile à maintenir, à déboguer. Soi - disant il est plus efficace, car elle permet la mise en cache / minifying css et js fichiers.

En ce qui me concerne, en utilisant des frameworks web (Django, Rails, ...), des bibliothèques de modèles javascript, ... j'ai tendance à diviser beaucoup de pages html en plusieurs modèles réutilisables - une sorte de widgets si vous le souhaitez . Par exemple, je peux avoir un widget de flux d'actualités , un widget de sélection multiple , etc ... chacun d'eux ayant une mise en page cohérente sur les différentes pages, et chacun étant contrôlé par son morceau de javascript.

Avec cette organisation - qui me semble aussi propre que possible, maximisant la réutilisabilité - j'ai du mal à comprendre pourquoi il serait plus simple de conserver tous les js et css dans des fichiers séparés. Je pense que ce serait tellement plus simple par exemple :

dans le fichier de sélection de widgets multiples

• html
• mise en page css de base
• contrôle des interactions directes et des améliorations UX avec un peu de JS.

Je pense que de cette façon, il est plus réutilisable, beaucoup plus maintenable, car vous n'avez pas à faire défiler un gros fichier js , puis basculer vers et faire défiler un gros fichier css , basculer à nouveau vers votre fichier html ... .

J'aimerais donc savoir comment vous organisez votre code, si vous vous en tenez à la séparation qui est généralement recommandée.

• Y a-t-il vraiment de bonnes raisons de le faire?
• N'est-ce pas que les guides sur le Web supposent généralement que vous n'utiliserez aucun outil sophistiqué (auquel cas j'aimerais obtenir des lectures en ligne plus à jour pour les meilleures pratiques)?
• Est-ce juste une question de préférence?

Je maintiens cette structure

Pour chaque page ou contrôle, je lui donne un dossier pour sa page html (ou aspx, ou php, etc.). Dans ce dossier se trouvent également des dossiers pour les fichiers js, xml, images et css. Ce sont des ressources spécifiques aux pages / contrôles et non partagées.

À la racine du site, se trouvent également les dossiers js, xml, images et css, chacun contenant des ressources à l'échelle du site.

Les fichiers js et css à l'échelle du site sont regroupés côté serveur et renvoyés sous forme de fichier js unique. Les pages spécifiques, car il n'y en a généralement qu'une par page, sont laissées seules.

Cela organise mes ressources quant à leur portée. Et bien que je puisse avoir une douzaine de fichiers js dans le dossier racine js, ils seront retournés comme une ressource js en les combinant et en les minimisant côté serveur (et en mettant en cache le résultat).

Je ne charge pas non plus de ressources spécifiques à pagex lorsque je suis sur pagey. Le seul «gaspillage» pourrait être dans le fichier de ressources à l'échelle du site, mais comme il est mis en cache et que de nombreuses ressources SERONT utilisées à plusieurs endroits, il est plus efficace.

généralement, la convention est d'avoir des fichiers séparés pour JS / CSS / HTML pour maintenir une séparation du contenu, de la présentation et du comportement. Cependant, si la vitesse devient un problème, tout se passe.

dans le fichier de sélection de widgets multiples

• html
• mise en page css de base
• contrôle des interactions directes et des améliorations UX avec un peu de JS.

J'ai un outil d'organisation ( trinité ) qui vous encourage à le faire.

Sauf que le fichier widget est divisé en 3 petits fichiers, HTML, CSS et JS. Cela signifie que vous avez vos fichiers séparés, mais ils sont toujours liés.

Cela évite le problème des gros fichiers mais vous donne toujours des fichiers séparés.

Donc, simplement séparer les préoccupations ne signifie pas que vous devriez avoir un gros fichier HTML / CSS / JS. Vous devriez avoir plusieurs triplets <HTML, CSS, JS>pour tout votre code encapsulé réutilisable

Maintenant, il n'y a rien de mal à avoir tout cela dans un seul fichier tant qu'ils sont clairement séparés.

Donc, un widget qui ressemble à

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

C'est bien et c'est super. Sauf que tout avoir dans un seul fichier, il est beaucoup trop facile pour un responsable de commencer à mélanger et à faire correspondre le CSS / JS / HTML.

Cela le rend beaucoup trop facile pour qu'il se transforme en spaghetti avec le temps.

La raison principale pour laquelle les gens font la promotion de fichiers séparés est double

• téléchargements séparés. Dès que vous copiez et collez n'importe quel code css / js dans plusieurs "widgets", vous devez le factoriser dans son propre fichier.
• Agressivement prévient le code de spaghetti en ne comptant pas sur l'auteur pour garder leurs css / js / html bien séparés dans un seul fichier

C'est une bonne pratique pour séparer html, css et js car cela facilite la gestion de votre site Web.

Lorsque vous commencez, vous ne pouvez avoir qu'un index.html principal et un seul fichier styles.css, mais plus que probablement à mesure que votre site Web se développe, vous vous retrouverez avec plusieurs scripts et feuilles de style spécifiques à un composant individuel ou point final.

En utilisant la séparation:

• Un JavaScript séparé peut être réutilisé sur d'autres pages
• Des CSS séparés peuvent être en mesure de donner au site un nouveau look facilement et à réutiliser
• Un code HTML séparé peut se concentrer sur le contenu et non sur l'aspect.

Il convient également de mentionner que CSS / JS peut être mis en cache s'il est utilisé sur plusieurs pages de votre site