Struktur direktori untuk situs web (folder js / css / img)

Selama bertahun-tahun saya telah menggunakan struktur direktori berikut untuk situs web saya:

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

bagiku terasa baik-baik saja sampai aku mulai menggunakan komponen pihak ketiga yang berbeda.
Misalnya, hari ini saya telah mengunduh komponen javascript pemilih datetime yang mencari gambarnya di direktori yang sama di mana file css berada (file css berisi url seperti "url ('calendar.png')").

Jadi sekarang saya punya 3 pilihan:

1) memasukkan datepicker.css ke direktori css saya dan memasukkan gambar-gambarnya. Saya tidak terlalu suka opsi ini karena saya akan memiliki css dan file gambar di dalam direktori css dan itu aneh. Saya juga dapat bertemu file dari berbagai komponen dengan nama yang sama, seperti 2 komponen berbeda, yang terhubung ke background.png dari file css mereka. Saya harus memperbaiki tabrakan nama tersebut (dengan mengganti nama salah satu file dan mengedit file yang sesuai yang berisi tautan).

2) masukkan datepicker.css ke direktori css saya, masukkan gambarnya ke direktori gambar dan edit datepicker.css untuk mencari gambar di direktori gambar. Opsi ini ok tapi saya harus meluangkan waktu untuk mengedit komponen pihak ketiga agar sesuai dengan struktur situs saya. Sekali lagi, tabrakan nama dapat terjadi di sini (seperti yang dijelaskan dalam opsi sebelumnya) dan saya harus memperbaikinya.

3) menempatkan datepicker.js, datepicker.css dan gambar-gambarnya ke dalam direktori yang terpisah, katakanlah / 3rdParty / datepicker / dan tempatkan file seperti yang dimaksudkan oleh penulis (mis., Misalnya, / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/something.png, dll.). Sekarang saya mulai berpikir bahwa opsi ini adalah yang paling benar.

Pengembang web yang berpengalaman, apa yang Anda rekomendasikan?

Saya selalu membuat direktori lib untuk komponen pihak ketiga, Anda benar-benar tidak ingin mengubah perpustakaan pihak ketiga kecuali itu sangat diperlukan.

Pergi dengan opsi ke-3.

Alih-alih memisahkan hal-hal berdasarkan jenis file, yang terasa sewenang-wenang bagi saya, saya mengatur file dengan cara pengembang akan menggunakan dan memikirkannya. Saya membagi beberapa hal ke dalam beberapa kategori dasar:

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)

Opsi # 2 juga tidak praktis dan berbahaya karena Anda harus menerapkan kembali semua perubahan Anda (dan karenanya mungkin lupa beberapa) ketika Anda meningkatkan perpustakaan pihak ke-3 Anda. Ini pasti besar, tidak, tidak! Opsi # 1 dan # 3 masing-masing memiliki kelebihan dan kekurangan. Jadi saya biasanya memilih kombinasi keduanya.

Solusi saya adalah menggunakan Opsi # 1 untuk file saya dan menggunakan Opsi # 3 untuk perpustakaan pihak ke-3.

Contoh:

<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