โครงสร้างไดเรกทอรีสำหรับเว็บไซต์ (โฟลเดอร์ js / css / img)

หลายปีที่ผ่านมาฉันใช้โครงสร้างไดเรกทอรีต่อไปนี้สำหรับเว็บไซต์ของฉัน:

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

มันดูดีสำหรับฉันจนฉันเริ่มใช้องค์ประกอบบุคคลที่สามที่แตกต่างกัน
ตัวอย่างเช่นวันนี้ฉันได้ดาวน์โหลดคอมโพเนนต์จาวาสคริปต์ตัวเลือกวันที่ที่ค้นหารูปภาพในไดเรกทอรีเดียวกันกับที่มีไฟล์ css อยู่ (ไฟล์ css มี URL เหมือน "url ('calendar.png')")

ดังนั้นตอนนี้ฉันมี 3 ตัวเลือก:

1)ใส่ datepicker.css ลงในไดเรกทอรี css ของฉันและใส่รูปภาพลงไป ฉันไม่ชอบตัวเลือกนี้เพราะฉันจะมีทั้งไฟล์ css และไฟล์รูปภาพในไดเรกทอรี css และมันก็แปลก นอกจากนี้ฉันอาจพบไฟล์จากส่วนประกอบต่าง ๆ ที่มีชื่อเดียวกันเช่น 2 ส่วนประกอบที่ต่างกันซึ่งลิงก์ไปยัง background.png จากไฟล์ css ฉันจะต้องแก้ไขการชนกันของชื่อเหล่านั้น (โดยการเปลี่ยนชื่อไฟล์หนึ่งไฟล์และแก้ไขไฟล์ที่เกี่ยวข้องที่มีลิงค์)

2)ใส่ datepicker.css ลงในไดเรกทอรี css ของฉันใส่รูปลงในไดเรกทอรีรูปภาพและแก้ไข datepicker.css เพื่อค้นหาภาพในไดเรกทอรีรูปภาพ ตัวเลือกนี้ใช้ได้ แต่ฉันต้องใช้เวลาในการแก้ไขส่วนประกอบของบุคคลที่สามเพื่อให้พอดีกับโครงสร้างเว็บไซต์ของฉัน อีกครั้งการชนชื่ออาจเกิดขึ้นที่นี่ (ตามที่อธิบายไว้ในตัวเลือกก่อนหน้า) และฉันจะต้องแก้ไข

3)ใส่ datepicker.js, datepicker.css และรูปภาพลงในไดเรกทอรีแยกกันสมมุติว่า / 3rdParty / datepicker / และวางไฟล์ตามที่ผู้เขียนต้องการ (เช่นตัวอย่าง / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/something.png ฯลฯ ) ตอนนี้ฉันเริ่มคิดว่าตัวเลือกนี้ถูกต้องที่สุด

นักพัฒนาเว็บที่มีประสบการณ์คุณแนะนำอะไร

ฉันมักจะสร้างไดเรกทอรี 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