web-dev-qa-db-fra.com

Structure de répertoire pour un site Web (dossiers js / css / img)

Pendant des années, j'ai utilisé la structure de répertoires suivante pour mes sites Web:

<root>
  ->js
    ->jquery.js
    ->tooltip.js
    ->someplugin.js
  ->css
    ->styles.css
    ->someplugin.css
  ->images
    -> all website images...

cela me semblait parfaitement correct jusqu'à ce que je commence à utiliser différents composants tiers.
Par exemple, j’ai téléchargé aujourd’hui un composant javascript du sélecteur de datetime qui recherche ses images dans le même répertoire que son fichier css (le fichier css contient des URL telles que "url ('calendar.png')") .

Alors maintenant, j'ai 3 options:

1) mets datepicker.css dans mon répertoire css et ses images. Je n'aime pas vraiment cette option car j'aurai les fichiers css et image dans le répertoire css et c'est bizarre. Je pourrais aussi rencontrer des fichiers de différents composants portant le même nom, tels que 2 composants différents, qui renvoient à background.png à partir de leurs fichiers CSS. Je vais devoir réparer ces conflits de noms (en renommant l'un des fichiers et en modifiant le fichier correspondant contenant le lien).

2) mettez datepicker.css dans mon répertoire css, placez ses images dans le répertoire images et modifiez datepicker.css pour rechercher les images dans le répertoire images. Cette option est acceptable, mais je dois passer du temps à modifier des composants tiers pour les adapter à la structure de mon site. Là encore, des collisions de noms peuvent se produire ici (comme décrit dans l'option précédente) et je devrai les réparer.

) placez datepicker.js, datepicker.css et ses images dans un répertoire distinct, disons/3rdParty/datepicker/et placez les fichiers tels que voulus par l'auteur (par exemple,/3rdParty/datepicker/css/datepicker.css, /3rdParty/datepicker/css/something.png, etc.). Maintenant, je commence à penser que cette option est la plus correcte.

Développeurs Web expérimentés, que recommandez-vous?

web-developmentcssjavascriptimagescontent
9
nightcoder

Je crée toujours un répertoire lib pour les composants tiers, vous ne voulez vraiment pas modifier les bibliothèques tierces à moins que cela ne soit strictement nécessaire.

Aller avec la 3ème option.

9
willvv

Au lieu de séparer les éléments par type de fichier, ce qui me semble arbitraire, j'organise les fichiers en fonction de la manière dont les développeurs les utilisent et en tiennent compte. Je divise les choses en quelques catégories de base:

myapp/
  ui/ # or "www"
    lib/ # third-party
      jquery/
      sugarjs/
      backbone/
      underscore/
    app/ # application logic
      main.js
      router.js
      views.js
      models.js
    style/ # all presentation
      main.css
      buttons.css
      icons/
        add.svg
        log.png
      img/
        logo.png
        signup.png
    components/ # standalone bundles of html/css/js, if necessary
  server/ # or "api" (all server-side logic)
2
Chris Calo

L'option n ° 2 n'est pas pratique et dangereuse, car vous devrez réappliquer toutes vos modifications (et donc en oublier certaines) lorsque vous mettrez à niveau vos bibliothèques tierces. C'est sûrement un gros non non! Les options 1 et 3 présentent chacune des avantages et des inconvénients. Donc, je vais généralement pour une combinaison des deux.

Ma solution consiste à utiliser l'option n ° 1 pour mes fichiers et l'option n ° 3 pour les bibliothèques tierces.

Exemple:

<root>
  -> js
    -> jquery.js
    -> main.js
  -> css
    -> reset.css
    -> style.css
  -> img
    -> img1.jpg
    -> img2.jpg
  -> lib
    -> someplugin1
      -> original folder/file structure of this plugin
    -> someplugin2
      -> original folder/file structure of this plugin
0
Mario Awad