Bonnes pratiques pour organiser la bibliothèque Javascript et la structure des dossiers CSS [fermé]

Comment organisez-vous votre dossier js et css dans votre application Web?

La structure actuelle de mon projet est comme celle-ci:

root/
├── assets/
│   ├── js/
│   │   └──lib/
│   ├── css/
│   └── img/
└── index.html

Mais c'est plus compliqué quand j'utilise de nombreuses bibliothèques javascript et plugin css. Le plugin Javascript est livré avec son propre fichier .js et parfois avec son propre fichier .css.

Par exemple, lorsque j'utilise JQuery avec le plugin JQueryUI, je mets le jquery.js et jquery-ui.js dans le répertoire js / lib. Mais JQueryUI est livré avec son propre fichier css. Où dois-je mettre le css du plugin javascript pour les meilleures pratiques? Dois-je les mettre dans le dossier lib, pour distinguer mon plugin css et javascript css? Ou ailleurs?

Je sais que c'est une préférence personnelle, mais je veux juste savoir comment vous organisez votre dossier de projet.

Merci d'avance :)

Je vais décrire une structure recommandée pour organiser les fichiers dans votre application HTML5. Il ne s’agit pas d’une tentative de créer une norme quelconque. Au lieu de cela, je ferai des suggestions sur la façon de grouper et de nommer les fichiers d'une manière logique et pratique.

Votre projet

Supposons que vous construisez une application HTML5. Dans certains cas, vous pouvez utiliser la racine de votre serveur comme conteneur principal, mais pour les besoins de cet article, je suppose que votre application HTML5 est contenue dans un dossier. Dans ce dossier, vous devez créer votre fichier d'index d'application ou votre point d'entrée principal.

• projet-appcropolis
• mon-index.html

En règle générale, votre application comprendra des fichiers HTML, CSS, images et Javascript. Certains de ces fichiers seront spécifiques à votre application et d'autres peuvent être utilisés dans plusieurs applications. C'est une distinction très importante. Pour grouper efficacement vos fichiers, vous devez commencer par séparer les fichiers à usage général des ressources spécifiques à l'application.

• projet-appcropolis
• Ressources
• vendeurs
• mon-index.html

Cette simple séparation facilite grandement la navigation dans vos fichiers. Une fois que vous avez placé les bibliothèques et les fichiers à usage général dans le dossier des fournisseurs , il est clair que les fichiers que vous allez éditer seront situés dans le dossier des ressources .

Mis à part votre code HTML, le reste des fichiers de votre application sont principalement des CSS, Javascript et des images. Il est fort probable que vous regroupiez déjà vos fichiers d'application dans des dossiers correspondant à ce type d'actifs.

• projet-appcropolis
• Ressources
• css
• js
• images
• Les données
• vendeurs
• mon-index.html

Le dossier js contiendra votre code Javascript. De même, le dossier images est l'endroit où vous devez ajouter des images qui sont utilisées directement à partir de l'index.html ou de toute autre page de votre application. Ce dossier d' images ne doit pas être utilisé pour héberger des fichiers liés aux feuilles de style. Votre code CSS et les images associées doivent être situés dans le dossier css . En faisant cela, vous pouvez créer des pages qui peuvent facilement utiliser différents thèmes et vous permettre à votre application d'être plus portable.

• projet-appcropolis
• Ressources
• css
• thème bleu
• background.png
• images
• background.png
• blue-theme.css
• mon-index.css
• js
• mon-index.js
• my-contact-info.js
• images
• des produits
• ordinateur.jpg
• cellphone.png
• printer.jpg
• mon-logo-entreprise-petit.png
• mon-logo-entreprise-large.png
• Les données
• some-data.json
• more-data.xml
• table-data.csv
• extra-data.txt
• vendeurs
• jquery
• images
• ajax-loader.gif
• icônes-18-white.png
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• une-bibliothèque-css
• some-plugin.jquery
• mon-index.html
• my-contact-info.html
• mes-produits.html

L'exemple précédent montre le contenu du dossier css . Notez qu'il existe un fichier nommé default.css qui doit être utilisé comme fichier CSS principal. Les images utilisées par la feuille de style par défaut doivent être placées dans le dossier images . Si vous souhaitez créer des feuilles de style alternatives ou si vous souhaitez remplacer les règles définies dans votre feuille de style par défaut, vous pouvez créer des fichiers CSS supplémentaires et les dossiers correspondants. Par exemple, vous pouvez créer une feuille de style blue-theme.css et placer toutes les images associées dans un thème bleudossier. Si vous avez du code CSS ou Javascript qui n'est utilisé que par une page (dans ce cas my-index.html), vous pouvez regrouper le code spécifique à la page dans des fichiers .css et .js avec le même nom de la page (ei my-index .css et my-index.js). Votre code CSS et Javascript doit être le plus générique possible, mais vous pouvez suivre les exceptions en les plaçant dans des fichiers séparés.

Recommandations finales

Certaines recommandations finales doivent être faites autour des noms de dossier et de fichier. En règle générale, assurez-vous d'utiliser des lettres minuscules dans tous les noms de dossier et de fichier. Lorsque vous utilisez plusieurs mots pour nommer un fichier ou un dossier, séparez-les par un tiret (c'est-à-dire my-company-logo-small.png). Si vous suivez les conseils de cet article, vous devriez pouvoir combiner plusieurs pages tout en gardant les ressources communes ensemble et le code personnalisé bien séparé.

Enfin, même si vous ne choisissez pas d'utiliser la structure recommandée dans cet article, il est important de s'en tenir à une convention. Cela augmentera votre productivité et, plus important encore, cela rendra le travail que vous faites facile à comprendre par les autres.

Crédit source: Comment organiser vos fichiers HTML, CSS et Javascript

 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

C'est ainsi que j'ai organisé les ressources statiques de mon application.