Gerçekten js, html ve css ayrı tutmak gerekir?

Ben senin js , html ve css ayrı tutmak için temiz olduğu her zaman duymak / okumak . Sözde hata ayıklamayı daha kolay hale getirir. Sözde daha verimli, çünkü css ve js dosyalarını önbelleğe almayı / küçültmeyi sağlıyor .

Bildiğim kadarıyla, web çerçevelerini (Django, Rails, ...), javascript şablon kütüphanelerini kullanarak, ... Tek bir html sayfasını birden çok yeniden kullanılabilir şablona bölme eğilimindeyim - isterseniz bir çeşit widget . Örneğin, bir haber feed'i widget'ım, seçili birden fazla widget'ım vs. olabilir, her biri farklı sayfalarda tutarlı bir düzene sahip ve her biri javascript parçası tarafından kontrol ediliyor.

Bana olabildiğince temiz görünen, yeniden kullanılabilirliği en üst düzeye çıkaran bu organizasyonla, tüm js ve css'leri ayrı dosyalarda tutmanın neden daha kolay olacağını anlamakta zorlanıyorum . Örneğin, bu kadar basit olacağını düşünüyorum :

içinde seçme çoklu Widget dosyası

• html
• temel css düzeni
• Doğrudan etkileşimlerin ve JS ile UX geliştirmelerinin kontrolü.

Ben bu şekilde daha yeniden kullanılabilir, çok daha sürdürülebilir olduğunu düşünüyorum, çünkü bir yağ js dosyası kaydırmak zorunda değilsiniz , daha sonra bir yağ css dosyasına geçmek ve gezinmek , tekrar html dosyanıza geçmek ... ileri ve geri .

Bu yüzden, genellikle tavsiye edilen ayrılığa sadık kalırsanız, kodunuzu nasıl düzenlediğinizi bilmek isterim.

• Bunu yapmak için gerçekten iyi nedenler var mı?
• web'deki rehberlerin genellikle herhangi bir fantezi araç kullanmayacağınızı varsaymaları değil mi (bu durumda en iyi uygulamalar için daha güncel çevrimiçi okumalar almak isterim)?
• Bu sadece bir tercih midir?

Bu yapıyı koruyorum

Her sayfa veya kontrol için, html sayfası (veya aspx veya php, vb.) Bu klasörde ayrıca js, xml, images ve css dosyaları için klasörler bulunur. Bunlar sayfaya / kontrole özeldir, paylaşılan kaynaklar için değildir.

Site kökünde, her biri site çapında kaynaklar içeren js, xml, images ve css klasörleri de vardır.

Site genelindeki js ve css dosyaları sunucu tarafında toplanır ve tek bir js dosyası olarak döndürülür. Sayfaya özgü olanlar, genellikle sayfa başına yalnızca bir tane olduğundan tek başına bırakılır.

Bu, kaynaklarımı kapsamlarına göre düzenler. Kök js klasöründe bir düzine js dosyası olsa da, bunları birleştirerek ve sunucu tarafını minimize ederek (ve sonucu önbelleğe alarak) bir js kaynağı olarak döndürülürler.

Sayfadayken pagex'e özgü kaynaklar da yüklemiyorum. Tek "atık" site çapında kaynak dosyasında olabilir, ancak önbelleğe alındığından ve kaynakların çoğu birden fazla yerde KULLANILACAKTIR, daha verimlidir.

genellikle kural, içerik, sunum ve davranış ayrımı sağlamak için JS / CSS / HTML için ayrı dosyalara sahip olmaktır. Ancak, hız bir sorun haline gelirse, her şey gider.

çoklu widget dosyasını seç

• html
• temel css düzeni
• Doğrudan etkileşimlerin ve JS ile UX geliştirmelerinin kontrolü.

Bunu teşvik eden bir organizasyon aracım ( üçlü ) var.

Widget dosyasının HTML, CSS ve JS olmak üzere 3 küçük dosyaya bölünmesi dışında. Bu, ayrı dosyalarınıza sahip olduğunuz, ancak yine de bağlı oldukları anlamına gelir.

Bu, yağ dosyaları sorununu önler, ancak yine de ayrı dosyalar verir.

Yani sadece endişelerin ayrılması koymak büyük bir HTML / CSS / JS dosyası olması gerektiği anlamına gelmez . <HTML, CSS, JS>Yeniden kullanılabilir tüm kapsüllenmiş kodunuz için birden fazla üçlünüzün olması gerekir

Şimdi, açıkça ayrıldıkları sürece, bunların tümünü tek bir dosyada bulundurmanın yanlış bir yanı yok.

Yani bir widget

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

Güzel ve harika. Tek bir dosyada her şeyin olması, bir bakımcının CSS / JS / HTML'yi karıştırmaya ve eşleştirmeye başlamasını çok kolaylaştırır.

Zamanla spagetti haline gelmesini çok kolaylaştırır.

İnsanların ayrı dosyaları tanıtmasının ana nedeni iki kattır

• ayrı indirmeler. Herhangi bir css / js kodunu birden çok "widget" a kopyalayıp yapıştırır yapıştırmaz, bunu kendi dosyasında hesaba katmanız gerekir.
• Css / js / html dosyalarını tek bir dosyada güzelce ayrılmış tutmak için yazara güvenmeyerek spagetti kodunu agresif bir şekilde önler

Onun web sitenizi daha kolay yönetilmesini sağlar gibi html, css ve js ayırmak için iyi bir uygulama.

Başlarken, yalnızca bir ana index.html ve tek bir styles.css dosyanız olabilir, ancak web siteniz büyüdükçe daha büyük olasılıkla, tek bir bileşene özgü birden çok komut dosyası ve stil sayfası elde edersiniz veya son nokta.

Ayrımı kullanma:

• Ayrı JavaScript Kullanılabilir Diğer Sayfalarda
• Ayrı CSS, siteye yeniden kullanımla birlikte kolayca yeni bir görünüm kazandırabilir
• Ayrı HTML görünebilir içeriğe odaklanabilirsiniz.

Ayrıca, sitenizdeki birden çok sayfada kullanılırsa CSS / JS'nin önbelleğe alınabileceği de belirtilmelidir