Verzeichnisstruktur für eine Website (Ordner js / css / img)

Seit Jahren verwende ich für meine Websites die folgende Verzeichnisstruktur:

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

Es schien mir vollkommen in Ordnung zu sein, bis ich anfing, verschiedene Komponenten von Drittanbietern zu verwenden.
Zum Beispiel habe ich heute eine Javascript-Komponente zur Datetime-Auswahl heruntergeladen, die nach Bildern in demselben Verzeichnis sucht, in dem sich ihre CSS-Datei befindet (CSS-Datei enthält URLs wie "url ('calendar.png')").

Jetzt habe ich drei Möglichkeiten:

1) lege datepicker.css in mein CSS-Verzeichnis und lege seine Bilder zusammen. Ich mag diese Option nicht wirklich, weil ich sowohl CSS- als auch Bilddateien im CSS-Verzeichnis haben werde und es seltsam ist. Außerdem kann ich Dateien von verschiedenen Komponenten mit demselben Namen treffen, z. B. zwei verschiedene Komponenten, die aus ihren CSS-Dateien auf background.png verlinken. Ich muss diese Namenskollisionen beheben (indem ich eine der Dateien umbenenne und die entsprechende Datei bearbeite, die den Link enthält).

2) Legen Sie datepicker.css in mein CSS-Verzeichnis, legen Sie die Bilder in das Bilderverzeichnis und bearbeiten Sie datepicker.css, um nach den Bildern im Bilderverzeichnis zu suchen. Diese Option ist in Ordnung, aber ich muss einige Zeit damit verbringen, Komponenten von Drittanbietern zu bearbeiten, um sie an meine Site-Struktur anzupassen. Auch hier können Namenskollisionen auftreten (wie in der vorherigen Option beschrieben), und ich muss sie beheben.

3) Legen Sie datepicker.js, datepicker.css und seine Bilder in ein separates Verzeichnis, sagen wir / 3rdParty / datepicker /, und platzieren Sie die Dateien so, wie es vom Autor beabsichtigt war (z. B. / 3rdParty / datepicker / css / datepicker) .css, /3rdParty/datepicker/css/something.png usw.). Jetzt fange ich an zu denken, dass diese Option die richtigste ist.

Erfahrene Webentwickler, was empfehlen Sie?

Ich erstelle immer ein lib-Verzeichnis für Komponenten von Drittanbietern. Sie möchten wirklich keine Bibliotheken von Drittanbietern ändern, es sei denn, dies ist unbedingt erforderlich.

Gehen Sie mit der 3. Option.

Anstatt Dinge nach Dateityp zu trennen, was für mich willkürlich ist, organisiere ich Dateien danach, wie Entwickler sie verwenden und darüber nachdenken. Ich teile die Dinge in einige grundlegende Kategorien ein:

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)

Option 2 ist auch nicht praktisch und gefährlich, da Sie alle Ihre Änderungen erneut anwenden müssen (und daher möglicherweise einige vergessen), wenn Sie Ihre Bibliotheken von Drittanbietern aktualisieren. Dies ist sicherlich ein großes Nein Nein! Die Optionen 1 und 3 haben jeweils Vor- und Nachteile. Also mache ich normalerweise eine Kombination aus beidem.

Meine Lösung besteht darin, Option 1 für meine Dateien und Option 3 für Bibliotheken von Drittanbietern zu verwenden.

Beispiel:

<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