Struktura katalogów strony internetowej (foldery js / css / img)

Od lat korzystam z następującej struktury katalogów na moich stronach:

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

wydawało mi się to całkiem w porządku, dopóki nie zacząłem używać różnych komponentów innych firm.
Na przykład dzisiaj pobrałem komponent javascript do wybierania daty i godziny, który szuka obrazów w tym samym katalogu, w którym znajduje się jego plik css (plik css zawiera adresy URL takie jak „url ('calendar.png')”).

Więc teraz mam 3 opcje:

1) umieść datepicker.css w moim katalogu css i umieść jego obrazy. Nie podoba mi się ta opcja, ponieważ będę mieć zarówno pliki css, jak i pliki graficzne w katalogu css i jest to dziwne. Mogę również spotkać pliki z różnych komponentów o tej samej nazwie, takie jak 2 różne komponenty, które prowadzą do pliku background.png z ich plików css. Będę musiał naprawić te kolizje nazw (zmieniając nazwę jednego z plików i edytując odpowiedni plik zawierający łącze).

2) umieść datepicker.css w moim katalogu css, umieść jego obrazy w katalogu obrazów i edytuj datepicker.css, aby wyszukać obrazy w katalogu obrazów. Ta opcja jest dobra, ale muszę poświęcić trochę czasu na edycję komponentów innych firm, aby dopasować je do struktury mojej witryny. Ponownie mogą wystąpić kolizje nazw (jak opisano w poprzedniej opcji) i będę musiał je naprawić.

3) umieść datepicker.js, datepicker.css i jego obrazy w osobnym katalogu, powiedzmy / 3rdParty / datepicker / i umieść pliki zgodnie z zamierzeniami autora (np. / 3rdParty / datepicker / css / datepicker .css, /3rdParty/datepicker/css/something.png itp.). Teraz zaczynam myśleć, że ta opcja jest najbardziej poprawna.

Doświadczeni programiści stron internetowych, co polecacie?

Zawsze tworzę katalog lib dla komponentów stron trzecich, naprawdę nie chcesz zmieniać bibliotek stron trzecich, chyba że jest to absolutnie konieczne.

Idź z trzecią opcją.

Zamiast rozdzielać rzeczy według typów plików, co wydaje mi się arbitralne, organizuję pliki według sposobu, w jaki programiści z nich korzystają i myślą o nich. Dzielę rzeczy na kilka podstawowych kategorii:

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)

Opcja nr 2 nie jest również praktyczna i niebezpieczna, ponieważ będziesz musiał ponownie zastosować wszystkie swoje zmiany (a zatem możesz zapomnieć o niektórych) podczas aktualizacji bibliotek innych firm. To z pewnością wielkie nie nie! Opcje 1 i 3 mają zalety i wady. Zwykle wybieram kombinację obu.

Moim rozwiązaniem jest użycie Opcji nr 1 dla moich plików i opcji Opcji 3 dla bibliotek stron trzecich.

Przykład:

<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