Webサイトのディレクトリ構造（js / css / imgフォルダー）

何年もの間、私のWebサイトには次のディレクトリ構造を使用しています。

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

さまざまなサードパーティコンポーネントを使い始めるまでは、まったく問題ないように思えました。
たとえば、今日、cssファイルが配置されているのと同じディレクトリで画像を検索する日時ピッカーJavaScriptコンポーネントをダウンロードしました（cssファイルには、「url（ 'calendar.png'）」のようなURLが含まれています）。

だから今私は3つのオプションがあります：

1） datepicker.cssを私のcssディレクトリに入れ、その画像を配置します。私はこのオプションがあまり好きではありません。cssディレクトリ内にcssと画像ファイルの両方があり、それは奇妙です。また、cssファイルからbackground.pngにリンクする2つの異なるコンポーネントなど、同じ名前の異なるコンポーネントのファイルに出会うこともあります。これらの名前の衝突を修正する必要があります（ファイルの1つの名前を変更し、リンクを含む対応するファイルを編集します）。

2） datepicker.cssをcssディレクトリに入れ、その画像をimagesディレクトリに入れ、datepicker.cssを編集して、imagesディレクトリで画像を探します。このオプションは問題ありませんが、サードパーティのコンポーネントを編集して自分のサイト構造に合わせるために、時間をかける必要があります。ここでも、名前の衝突が発生する可能性があり（前のオプションで説明したとおり）、それらを修正する必要があります。

3） datepicker.js、datepicker.cssおよびその画像を別のディレクトリに配置します。たとえば、/ 3rdParty / datepicker /とし、作成者が意図したとおりにファイルを配置します（例：/ 3rdParty / datepicker / css / datepicker）。 .css、/ 3rdParty / datepicker / css / something.pngなど）。今、私はこのオプションが最も正しいと思い始めています。

経験豊富なWeb開発者、何をお勧めしますか？

私は常にサードパーティのコンポーネント用のlibディレクトリを作成します。厳密に必要な場合を除いて、サードパーティのライブラリを変更したくありません。

3番目のオプションを選択します。

私には恣意的であると感じているファイルタイプで物事を分離する代わりに、開発者がそれらをどのように使用し、どのように考えるかによってファイルを整理します。私は物事をいくつかの基本的なカテゴリーに分けます：

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は、サードパーティのライブラリをアップグレードするときにすべての変更を再適用する必要があるため（したがって一部を忘れる可能性があるため）、実用的でも危険でもありません。これはきっと大きな間違いではありません！オプション＃1と＃3にはそれぞれ長所と短所があります。だから私は通常両方の組み合わせに行きます。

私の解決策は、ファイルにオプション＃1を使用し、サードパーティのライブラリにオプション＃3を使用することです。

例：

<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