Méthode recommandée pour organiser la structure de la bibliothèque Javascript et des dossiers CSS
Comment organisez-vous votre dossier js & css dans votre application Web?
Ma structure de projet actuelle est comme celle-ci:
root/
assets/
js/
lib/
css/
img/
index.html
Mais c’est plus compliqué lorsque j’utilise beaucoup de librairies javascript et 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 place les fichiers jquery.js et jquery-ui.js dans le répertoire js/lib. Mais JQueryUI est livré avec son propre fichier css. Où devrais-je placer le css du plugin javascript pour une meilleure pratique? Devrais-je les mettre dans le dossier lib pour distinguer mes plugins css et javascript? 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 :)
Comment organiser vos fichiers HTML, CSS et Javascript
Je vais décrire une structure recommandée pour organiser les fichiers dans votre application HTML5. Ce n'est pas une tentative de créer un type de standard. Au lieu de cela, je vais faire des suggestions sur la façon de grouper et de nommer les fichiers de 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 aux fins 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.
- appcropolis-project
- mon-index.html
Généralement, votre application sera composée de fichiers HTML, CSS, Images et Javascript. Certains de ces fichiers seront spécifiques à votre application et d'autres pourront être utilisés dans plusieurs applications. C'est une distinction très importante. Pour regrouper efficacement vos fichiers, vous devez commencer par séparer les fichiers à usage général des ressources spécifiques à une application.
full ">
- appcropolis-project
- ressources
- vendeurs
- mon-index.html
Cette simple séparation facilite beaucoup la navigation dans vos fichiers. Une fois que vous avez placé des bibliothèques et des fichiers à usage général dans le dossier des fournisseurs , il est clair que les fichiers que vous allez modifier se trouveront dans le dossier ressources dossier.
Outre votre code HTML, les autres fichiers de votre application sont principalement des fichiers 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'actif.
- appcropolis-project
- ressources
- css
- js
- images
- data
- vendeurs
- mon-index.html
Le dossier js contiendra votre code Javascript. De même, le dossier images est l'emplacement où vous devez ajouter des images utilisées directement à partir du fichier index.html ou de toute autre page de votre application. Ce dossier images ne doit pas être utilisé pour héberger des fichiers liés à une feuille 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 pouvant facilement utiliser différents thèmes et permettre à votre application d'être plus portable.
- appcropolis-project
- ressources
- css
- blue-theme
- background.png
- images
- background.png
- blue-theme.css
- mon-index.css
- js
- my-index.js
- mon-contact-info.js
- images
- produits
- computer.jpg
- cellphone.png
- printer.jpg
- my-company-logo-small.png
- my-company-logo-large.png
- data
- un-data.json
- more-data.xml
- table-data.csv
- extra-data.txt
- vendeurs
- jquery
- images
- ajax-loader.gif
- icons-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
- mon-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 dossier blue-theme . Si vous avez du code CSS ou Javascript utilisé par une seule page (dans ce cas, my-index.html), vous pouvez grouper du code spécifique à une page dans des fichiers .css et .js avec le même nom de page (ei my-index .css et my-index.js). Votre code CSS et Javascript doit être aussi générique que possible, mais vous pouvez garder une trace des exceptions en les plaçant dans des fichiers séparés.
Recommandations finales
Certaines recommandations finales doivent être faites autour des noms de dossiers et de fichiers. En règle générale, veillez à utiliser des lettres minuscules dans tous les noms de dossiers et de fichiers. Lorsque vous utilisez plusieurs mots pour nommer un fichier ou un dossier, séparez-les par un trait d'union (par exemple, my-company-logo-small.png). Si vous suivez les conseils de cet article, vous devriez pouvoir combiner plusieurs pages tout en conservant des ressources communes et un 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 respecter une convention. Cela augmentera votre productivité et surtout, cela rendra le travail que vous ferez facile à comprendre pour les autres.
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
Voici comment j'ai organisé les ressources statiques de mon application.