网站的目录结构（js / css / img文件夹）

多年来，我一直在为网站使用以下目录结构：

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

在我开始使用不同的第三方组件之前，这对我来说似乎非常好。
例如，今天我下载了一个日期时间选择器javascript组件，该组件在其css文件所在的目录中查找其图像（css文件包含诸如“ url（'calendar.png'）”之类的url）。

所以现在我有3个选择：

1）将datepicker.css放入我的css目录中，并将其图像放入。我不太喜欢这个选项，因为我在css目录中同时包含css和图像文件，这很奇怪。另外，我可能会遇到来自具有相同名称的不同组件的文件，例如2个不同的组件，它们从其css文件链接到background.png。我将必须解决这些名称冲突（通过重命名文件之一并编辑包含链接的相应文件）。

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目录，除非确实有必要，否则您真的不想更改第三方库。

选择第三个选项。

我没有按照文件类型将东西分开，这在我看来是任意的，而是根据开发人员将如何使用和考虑它们来组织文件。我将事情分为几个基本类别：

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