Haruskah Anda benar-benar memisahkan js, html, dan css Anda?

Saya mendengar / membaca sepanjang waktu bahwa lebih bersih untuk memisahkan js , html , dan css Anda . Seharusnya itu membuatnya lebih mudah untuk dirawat, debug. Seharusnya lebih efisien, karena memungkinkan caching / memperkecil file css dan js .

Sejauh yang saya ketahui, menggunakan kerangka kerja web (Django, Rails, ...), javascript templating libraries, ... Saya cenderung membagi cukup banyak halaman html tunggal menjadi beberapa templat yang dapat digunakan kembali - semacam widget jika Anda mau . Misalnya saya dapat memiliki widget umpan berita , beberapa widget pilihan, dll ... masing-masing memiliki tata letak yang konsisten di seluruh halaman yang berbeda, dan masing-masing dikontrol oleh javascriptnya.

Dengan organisasi ini - yang menurut saya sebersih mungkin, memaksimalkan penggunaan kembali - saya mengalami kesulitan untuk memahami mengapa akan lebih mudah untuk menyimpan semua js dan css dalam file terpisah. Saya agak berpikir itu akan jauh lebih sederhana misalnya :

di pilih beberapa file widget

• html
• tata letak css dasar
• kontrol interaksi langsung dan peningkatan UX dengan sedikit JS.

Saya pikir cara yang lebih dapat digunakan kembali, jauh lebih dipertahankan, karena Anda tidak perlu gulir melalui lemak js file, kemudian beralih ke dan gulir melalui lemak css berkas, beralih lagi untuk Anda html file ... bolak-balik .

Jadi saya ingin tahu bagaimana kalian mengatur kode Anda, jika Anda tetap berpegang pada pemisahan yang biasanya direkomendasikan.

• Apakah ada alasan bagus untuk melakukannya?
• bukankah itu panduan di web biasanya berasumsi bahwa Anda tidak akan menggunakan alat mewah (dalam hal ini saya ingin mendapatkan lebih banyak bacaan online terbaru untuk praktik terbaik)?
• Apakah ini hanya masalah preferensi?

Saya mempertahankan struktur ini

Untuk setiap halaman atau kontrol, saya berikan folder untuk halaman html itu (atau aspx, atau php, dll). Dalam folder itu juga ada folder untuk file js, xml, gambar dan css. Itu untuk halaman / kontrol khusus, bukan sumber daya bersama.

Di root situs, juga folder js, xml, gambar dan css, yang masing-masing berisi sumber daya di seluruh situs.

Situs lebar file js dan css digulung sisi server dan dikembalikan sebagai file js tunggal. Yang spesifik halaman, karena biasanya hanya ada satu per halaman, dibiarkan sendiri.

Ini mengatur sumber daya saya untuk ruang lingkup mereka. Dan sementara saya mungkin memiliki selusin file js di folder root js, mereka akan dikembalikan sebagai sumber daya js dengan menggabungkan dan memperkecil mereka sisi server (dan menyimpan hasilnya).

Saya juga tidak memuat sumber daya khusus untuk pagex ketika saya di halaman. Satu-satunya "limbah" mungkin ada di file sumber daya situs luas, tetapi karena itu di-cache, dan banyak dari sumber daya AKAN digunakan di beberapa tempat, itu lebih efisien.

umumnya konvensi adalah untuk memiliki file terpisah untuk JS / CSS / HTML untuk menjaga pemisahan konten, presentasi dan perilaku. Namun, jika kecepatan menjadi masalah maka apapun akan berjalan.

di pilih beberapa file widget

• html
• tata letak css dasar
• kontrol interaksi langsung dan peningkatan UX dengan sedikit JS.

Saya memiliki alat organisasi ( trinitas ) yang mempromosikan Anda melakukannya.

Kecuali bahwa file widget dibagi menjadi 3 file kecil, HTML, CSS dan JS. Ini berarti Anda memiliki file terpisah tetapi masih terhubung.

Ini menghindari masalah file lemak tetapi masih memberi Anda file terpisah.

Jadi sederhanakan pemisahan kekhawatiran tidak berarti Anda harus memiliki satu file HTML / CSS / JS besar. Anda harus memiliki beberapa kembar tiga <HTML, CSS, JS>untuk semua kode enkapsulasi yang dapat digunakan kembali

Sekarang tidak ada salahnya memiliki semua ini dalam satu file selama mereka jelas dipisahkan.

Jadi widget itu terlihat seperti

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

Baik dan bagus. Kecuali memiliki segalanya dalam satu file membuatnya terlalu mudah bagi pengelola untuk mulai mencampur dan mencocokkan CSS / JS / HTML.

Itu membuatnya terlalu mudah untuk berubah menjadi spageti seiring waktu.

Alasan utama orang mempromosikan file terpisah adalah dua kali lipat

• pisahkan unduhan. Segera setelah Anda menyalin dan menempelkan kode css / js ke beberapa "widget", Anda perlu memasukkannya ke dalam file itu sendiri.
• Secara agresif mencegah kode spageti dengan tidak bergantung pada penulis untuk menjaga agar css / js / html mereka terpisah dengan baik dalam satu file