Czy naprawdę powinieneś trzymać swoje pliki js, html i css oddzielnie?

Cały czas słyszę / czytam, że czystsze jest oddzielenie plików js , html i css . Podobno ułatwia to utrzymanie, debugowanie. Podobno jest bardziej wydajny, ponieważ umożliwia buforowanie / minimalizowanie plików css i js .

Jeśli chodzi o mnie, używając frameworków internetowych (Django, Rails, ...), bibliotek szablonów javascript, ... Mam tendencję do dzielenia całkiem jednej strony HTML na wiele szablonów wielokrotnego użytku - jakieś widżety, jeśli chcesz . Na przykład mogę mieć widżet kanału informacyjnego, widżet wielokrotnego wyboru itp. ... każdy z nich ma spójny układ na różnych stronach i każdy jest kontrolowany przez jego fragment javascript.

Dzięki tej organizacji - która wydaje mi się tak czysta, jak to tylko możliwe, maksymalizując możliwość ponownego użycia - nie mogę zrozumieć, dlaczego łatwiej byłoby przechowywać wszystkie pliki js i css w osobnych plikach. Myślę, że byłoby to o wiele prostsze na przykład :

w zaznaczonym pliku wielu widgetów

• HTML
• podstawowy układ css
• kontrola bezpośrednich interakcji i ulepszeń UX z odrobiną JS.

Myślę, że w ten sposób jest bardziej wielokrotnego użytku, o wiele łatwiejsze w utrzymaniu, ponieważ nie musisz przewijać grubego pliku js , a następnie przełączać się i przewijać gruby plik css , ponownie przełączać się na plik HTML ... tam iz powrotem .

Chciałbym wiedzieć, jak porządkujecie swój kod, jeśli trzymacie się rozdziału, który jest zwykle zalecany.

• Czy istnieją naprawdę dobre powody, aby to zrobić?
• czy nie jest tak, że przewodniki w Internecie zazwyczaj zakładają, że nie użyjesz żadnego wymyślnego narzędzia (w takim przypadku chciałbym uzyskać bardziej aktualne odczyty online dla najlepszych praktyk)?
• Czy to tylko kwestia preferencji?

Utrzymuję tę strukturę

Dla każdej strony lub kontrolki daję jej folder dla strony HTML (lub aspx, php itp.). W tym folderze znajdują się również foldery dla plików js, xml, obrazów i plików css. Są to zasoby specyficzne dla strony / kontroli, a nie dla zasobów współdzielonych.

W katalogu głównym witryny znajdują się również foldery js, xml, obrazy i css, z których każdy zawiera zasoby dla całej witryny.

Pliki js i css dla całej witryny są zwijane po stronie serwera i zwracane jako pojedynczy plik js. Specyficzne dla strony, ponieważ zwykle jest tylko jedna na stronę, są pozostawione same sobie.

To organizuje moje zasoby pod względem ich zakresu. I chociaż mogę mieć kilkanaście plików js w folderze głównym js, zostaną one zwrócone jako jeden zasób js przez połączenie i zminimalizowanie ich po stronie serwera (i buforowanie wyniku).

Nie ładuję też zasobów specyficznych dla pagex, kiedy jestem na pagey. Jedyne „marnotrawstwo” może znajdować się w pliku zasobów całej witryny, ale ponieważ jest on buforowany, a wiele zasobów BĘDZIE używanych w wielu miejscach, jest bardziej wydajny.

ogólnie konwencja polega na posiadaniu osobnych plików dla JS / CSS / HTML w celu zachowania oddzielenia treści, prezentacji i zachowania. Jeśli jednak prędkość staje się problemem, wszystko idzie.

w zaznaczonym pliku wielu widgetów

• HTML
• podstawowy układ css
• kontrola bezpośrednich interakcji i ulepszeń UX z odrobiną JS.

Mam narzędzie organizacyjne ( trójca ), które cię promuje.

Tyle że plik widżetu jest podzielony na 3 małe pliki: HTML, CSS i JS. Oznacza to, że masz oddzielne pliki, ale nadal są połączone.

Pozwala to uniknąć problemu grubych plików, ale nadal zapewnia oddzielne pliki.

Tak więc po prostu rozłożenie obaw nie oznacza, że ​​powinieneś mieć jeden duży plik HTML / CSS / JS. Powinieneś mieć wiele trojaczków <HTML, CSS, JS>dla całego kodowanego kodu wielokrotnego użytku

Teraz nie ma nic złego w trzymaniu ich wszystkich w jednym pliku, o ile są one wyraźnie rozdzielone.

Tak wygląda widget

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

Jest w porządku i świetnie. Poza tym, że wszystko w jednym pliku sprawia, że ​​opiekun może zbyt łatwo zacząć mieszać i dopasowywać CSS / JS / HTML.

To sprawia, że ​​z czasem staje się zbyt łatwe, aby z czasem przekształcić się w spaghetti.

Głównym powodem, dla którego ludzie promują oddzielne pliki, jest dwojaki

• oddzielne pliki do pobrania. Jak tylko skopiujesz i wkleisz dowolny kod css / js do wielu „widżetów”, musisz dodać go do własnego pliku.
• Agresywnie zapobiega kodowi spaghetti, nie polegając na autorze, aby jego plik css / js / html był ładnie rozdzielony w jednym pliku

Dobrą praktyką jest oddzielanie html, css i js, ponieważ ułatwia zarządzanie witryną.

Kiedy zaczynasz, możesz mieć tylko główny plik index.html i pojedynczy plik styles.css, ale bardziej niż prawdopodobne, że Twoja witryna będzie się rozwijać, pojawi się wiele skryptów i arkuszy stylów specyficznych dla poszczególnych elementów lub punkt końcowy.

Korzystanie z separacji:

• Oddzielny JavaScript może być użyty ponownie na innych stronach
• Oddzielny CSS może być w stanie łatwo nadać stronie nowy wygląd wraz z ponownym użyciem
• Oddzielny HTML może być skoncentrowany na treści, a nie na wyglądzie.

Należy również wspomnieć, że CSS / JS może być buforowany, jeśli jest używany na wielu stronach w Twojej witrynie