Cấu trúc thư mục cho một trang web (thư mục js / css / img)

Trong nhiều năm, tôi đã sử dụng cấu trúc thư mục sau cho các trang web của mình:

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

nó có vẻ hoàn toàn tốt với tôi cho đến khi tôi bắt đầu sử dụng các thành phần bên thứ 3 khác nhau.
Ví dụ: hôm nay tôi đã tải xuống một thành phần javascript của bộ chọn thời gian tìm kiếm hình ảnh của nó trong cùng thư mục chứa tệp css của nó (tệp css chứa các url như "url ('calendar.png')").

Vì vậy, bây giờ tôi có 3 lựa chọn:

1) đặt datepicker.css vào thư mục css của tôi và đặt hình ảnh của nó cùng. Tôi không thực sự thích tùy chọn này vì tôi sẽ có cả tệp css và hình ảnh trong thư mục css và nó thật lạ. Ngoài ra tôi có thể gặp các tệp từ các thành phần khác nhau có cùng tên, chẳng hạn như 2 thành phần khác nhau, liên kết đến background.png từ các tệp css của chúng. Tôi sẽ phải sửa các xung đột tên đó (bằng cách đổi tên một trong các tệp và chỉnh sửa tệp tương ứng có chứa liên kết).

2) đặt datepicker.css vào thư mục css của tôi, đặt hình ảnh của nó vào thư mục hình ảnh và chỉnh sửa datepicker.css để tìm kiếm hình ảnh trong thư mục hình ảnh. Tùy chọn này ổn, nhưng tôi phải dành chút thời gian để chỉnh sửa các thành phần của bên thứ 3 để phù hợp với cấu trúc trang web của mình. Một lần nữa, va chạm tên có thể xảy ra ở đây (như được mô tả trong tùy chọn trước) và tôi sẽ phải sửa chúng.

3) đặt datepicker.js, datepicker.css và hình ảnh của nó vào một thư mục riêng, giả sử / 3rdParty / datepicker / và đặt các tệp theo ý của tác giả (ví dụ: / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/s Something.png, v.v.). Bây giờ tôi bắt đầu nghĩ rằng tùy chọn này là chính xác nhất.

Các nhà phát triển web có kinh nghiệm, bạn khuyên gì?

Tôi luôn tạo một thư mục lib cho các thành phần của bên thứ ba, bạn thực sự không muốn thay đổi thư viện của bên thứ ba trừ khi thực sự cần thiết.

Đi với tùy chọn thứ 3.

Thay vì phân tách mọi thứ theo loại tệp mà tôi cảm thấy tùy tiện, tôi tổ chức các tệp theo cách các nhà phát triển sẽ sử dụng và suy nghĩ về chúng. Tôi chia mọi thứ thành một vài loại cơ bản:

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)

Tùy chọn # 2 không thực tế và nguy hiểm vì bạn sẽ phải áp dụng lại tất cả các thay đổi của mình (và do đó có thể quên một số) khi bạn nâng cấp thư viện của bên thứ 3. Đây chắc chắn là một không lớn không! Tùy chọn # 1 và # 3 đều có ưu điểm và nhược điểm. Vì vậy, tôi thường đi cho sự kết hợp của cả hai.

Giải pháp của tôi là sử dụng Tùy chọn # 1 cho các tệp của mình và sử dụng Tùy chọn # 3 cho các thư viện của bên thứ 3.

Thí dụ:

<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