Tek büyük .css dosyası vs birden çok daha küçük belirli .css dosyaları? [kapalı]

Hemen hemen her sayfada kullanılacak stil öğelerini içeren tek bir canavar .css dosyasına sahip olmanın herhangi bir avantajı var mı?

Yönetim kolaylığı için, farklı CSS türlerini birkaç dosyaya çıkarmak istiyorum ve ana dosyamdaki her dosyayı eklemek <link />o kadar kötü?

Bunun daha iyi olduğunu düşünüyorum

1. positions.css
2. buttons.css
3. tables.css
4. copy.css

vs.

1. site.css

Bunu bir şekilde diğerine karşı yapanlarla karşılaştınız mı?

Sass veya LESS gibi bir CSS derleyicisi gitmek için harika bir yoldur. Bu şekilde, her şey düzgün bir şekilde bileşenlere bölünmüş olarak en güzel geliştirme ortamını korurken, site için (normal bir tek CSS kaynak dosyasından çok daha küçük ve daha hızlı olacak) tek bir simge durumuna küçültülmüş CSS dosyası sunabileceksiniz.

Sass ve LESS, CSS'nin yazılmasını ve bakımını kolaylaştırmak için değişkenler, yuvalama ve diğer yolların ek avantajına sahiptir. Şiddetle tavsiye edilir. Şahsen Sass (SCSS sözdizimi) kullanıyorum, ancak daha önce LESS kullanıyordum. Her ikisi de harika, benzer faydaları var. Bir derleyici ile CSS yazdıktan sonra, bir derleyici olmadan yapmak istemezsiniz.

http://lesscss.org

http://sass-lang.com

Ruby ile uğraşmak istemiyorsanız, Mac için bu LESS derleyici harika:

http://incident57.com/less/

Veya CodeKit'i kullanabilirsiniz (aynı kişiler tarafından):

http://incident57.com/codekit/

WinLess, DAHA AZ yazmak için bir Windows GUI

http://winless.org/

Bu cevaplaması zor bir soru. Bence her iki seçeneğin de artıları ve eksileri var.

Şahsen tek bir BÜYÜK CSS dosyası üzerinden okumayı sevmiyorum ve bunu sürdürmek çok zor. Öte yandan, bunu bölmek, işleri yavaşlatabilecek ekstra http isteklerine neden olur.

Benim düşüncem iki şeyden biri olurdu.

1) CSS'nizin oluşturduktan sonra ASLA değişmeyeceğini biliyorsanız, geliştirme aşamasında birden fazla CSS dosyası oluşturabilirim (okunabilirlik için) ve sonra yayınlanmadan önce bunları manuel olarak birleştiririm (http isteklerini azaltmak için)

2) CSS'nizi arada bir değiştireceğinizi ve okunabilirliğini sürdürmeniz gerektiğini biliyorsanız, bunları birleştirmek için ayrı dosyalar oluşturur ve kodu kullanırsınız (bir çeşit programlama dili kullanmanız şartıyla) çalışma zamanı oluşturma süresi (çalışma zamanı minimizasyonu / kombinasyonu bir kaynak domuzudur).

Her iki seçenek ile de http isteklerini daha da azaltmak için istemci tarafında önbellekleme tavsiye ediyoruz.

DÜZENLEME: Kod dışında bir şey kullanarak çalışma zamanında CSS birleştirmek gösteren
bu blog bulundu . Bir göz atmaya değer (henüz kendim test etmedim).

DÜZENLEME 2:
Tasarım zamanımda ayrı dosyalar ve küçültmek ve birleştirmek için bir oluşturma işlemi kullanmaya karar verdim. Bu şekilde ben geliştirirken ayrı (yönetilebilir) css ve zamanında uygun monolitik küçültülmüş bir dosya olabilir. Ve hala statik dosyaları ve daha az sistem yükü var çünkü çalışma zamanında sıkıştırma / küçültme yapmıyorum.

not: orada alışveriş yapanlar için , derleme paketini oluşturma sürecinizin bir parçası olarak kullanmanızı şiddetle tavsiye ederim . exeIDE'nizden veya bir derleme komut dosyasından oluşturuyor olsanız da, paketleyici dahil olan üzerinden Windows üzerinde yürütülebilir veya zaten node.js çalıştıran herhangi bir makinede çalıştırılabilir.

Geliştirme sırasında birden fazla CSS dosyasını tercih ederim. Yönetim ve hata ayıklama bu şekilde çok daha kolaydır. Ancak, dağıtım zamanı geldiğinde bunun yerine YUI Kompresörü gibi bir CSS küçültme aracı kullanmanızı öneririm, bu da CSS dosyalarınızı tek bir monolitik dosyada birleştirir.

Her iki dünyayı da istiyorsun.

Birden fazla CSS dosyası istiyorsunuz çünkü akıl sağlığınız boşa harcanacak korkunç bir şey.

Aynı zamanda, tek ve büyük bir dosyaya sahip olmak daha iyidir.

Çözüm, birden fazla dosyayı tek bir dosyada birleştiren bazı mekanizmalara sahip olmaktır.

Bir örnek şudur:

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

Ardından, allcss.php betiği dosyaları birleştirmeyi ve teslim etmeyi işler.

İdeal olarak, komut dosyası tüm dosyalardaki mod tarihlerini kontrol eder, bunlardan herhangi biri değişirse yeni bir bileşik oluşturur, ardından bu bileşiği döndürür ve ardından Yedek CSS göndermemek için If-Modified HTTP üstbilgilerini denetler.

Bu size her iki dünyanın en iyisini verir. JS için de harika çalışıyor.

Sayfalarınızın yüklenme süresi için yalnızca bir CSS dosyasına sahip olmak daha iyidir, çünkü daha az HTTP isteği anlamına gelir.

Birkaç küçük CSS dosyasına sahip olmak geliştirmenin daha kolay olduğu anlamına gelir (en azından bence: uygulamanızın modülü başına bir CSS dosyasına sahip olmak işleri kolaylaştırır) .

Yani her iki durumda da iyi nedenler var ...

Her iki fikirden de en iyi şekilde yararlanmanızı sağlayacak bir çözüm:

• Birkaç küçük CSS dosyası kullanarak geliştirme
  • yani geliştirilmesi daha kolay
• Uygulamanız için bir derleme işlemine sahip olmak, bu dosyaları tek bir dosyada "birleştirir"
  • Bu derleme işlemi bu büyük dosyayı küçültebilir, btw
  • Bu, uygulamanızın "çoklu dosya modundan" tek dosya moduna "geçmesine izin veren bazı yapılandırma öğelerine sahip olması gerektiği anlamına gelir.
• Ve üretimde sadece büyük dosyayı kullanmak için
  • yani daha hızlı sayfa yükleme

CSS dosyalarının birleştirilmesini derleme zamanında değil, çalışma zamanında yapan bazı yazılımlar da vardır; ancak çalışma zamanında yapmak biraz daha fazla CPU yemek anlamına gelir (ve büyük dosyayı çok sık yeniden oluşturmamak için önbellekleme için bazı önleme mekanizmaları gerektirir)

Tarihsel olarak, tek bir CSS dosyasına sahip olmanın ana avantajlarından biri x, HTTP1.1 kullanırken hız avantajıdır.

Ancak, Mart 2018'den itibaren tarayıcıların% 80'inden fazlası artık tarayıcının birden fazla kaynağı aynı anda indirmesine ve kaynakları önceden etkili bir şekilde zorlayabilmesine izin veren HTTP2'yi destekliyor . Tüm sayfalar için tek bir CSS dosyasına sahip olmak, gerekenden daha büyük bir dosya boyutu anlamına gelir. Uygun tasarımla, bunu kodlamanın daha kolay olmasından başka bir avantaj görmüyorum.

En iyi performans için HTTP2 için ideal tasarım:

• Tüm sayfalarda kullanılan ortak stilleri içeren bir çekirdek CSS dosyasına sahip olun.
• Sayfaya özgü CSS'yi ayrı bir dosyada bulundurun
• Bekleme süresini en aza indirmek için HTTP2 push CSS kullanın (tekrarlanan push'ları önlemek için bir çerez kullanılabilir)
• İsteğe bağlı olarak katlama CSS'sinin üzerinde ayırın ve önce bunu itin ve kalan CSS'yi daha sonra yükleyin (düşük bant genişliğine sahip mobil cihazlar için yararlıdır)
• Gelecekteki sayfa yüklemelerini hızlandırmak isterseniz, sayfa yüklendikten sonra site veya belirli sayfalar için kalan CSS'yi de yükleyebilirsiniz.

Monolitik stil sayfaları (diğer yanıtlarda açıklanmıştır) birçok fayda sağlar, ancak stil sayfası belgesinin genel boyutuna bağlı olarak IE'de sorun yaşayabilirsiniz. IE, tek bir dosyadan kaç seçicinin okuyacağı konusunda bir sınırlamaya sahiptir . Sınır 4096 seçicidir. Eğer monolitik stil sayfanız bundan daha fazlasına sahip olacaksa, bölmek istersiniz. Bu sınırlama sadece IE'de çirkin bir kafaya sahip.

Bu, IE'nin tüm sürümleri içindir.

Bkz Ross Bruniges Blog ve MSDN AddRule sayfasını .

Birden fazla css dosyasına sahip olmanın faydalı olduğu bir devrilme noktası vardır.

Ortalama bir kullanıcının yalnızca 5 dediği gibi görmesi muhtemel 1M + sayfalara sahip bir site, muazzam oranlarda bir stil sayfasına sahip olabilir, bu nedenle büyük bir ilk indirmeye sahip olarak sayfa yükü başına tek bir ek isteğin ek yükünü kaydetmeye çalışmak yanlıştır ekonomi.

Argümanı aşırı sınıra kadar uzatın - tüm web için bir büyük stil sayfasının olması gerektiğini önermek gibidir. Açıkça saçma.

Devrilme noktası her site için farklı olacaktır, bu yüzden zor ve hızlı bir kural yoktur. Sayfa başına benzersiz css miktarına, sayfa sayısına ve siteyi kullanırken ortalama bir kullanıcının rutin olarak karşılaşabileceği sayfa sayısına bağlı olacaktır.

Genellikle bir avuç CSS dosyaları var:

• sıfırlamalar ve genel stiller için "global" bir css dosyası
• mantıksal olarak gruplandırılmış sayfalar için "modül" özel css dosyaları (belki bir ödeme sihirbazındaki her sayfa vb.)
• sayfadaki geçersiz kılmalar için "sayfa" özel css dosyaları (veya bunu tek tek sayfadaki bir bloğa koyun)

CSS dosyaları için birden fazla sayfa isteğiyle gerçekten fazla ilgilenmiyorum. Çoğu insanın iyi bant genişliği var ve eminim ki tüm stilleri tek bir monolitik CSS dosyasına birleştirmekten çok daha büyük bir etkiye sahip olacak diğer optimizasyonlar var. Değiş tokuş hız ve sürdürülebilirlik arasındadır ve ben her zaman sürdürülebilirliğe eğilimliyim. YUI comperssor sesleri oldukça güzel olsa da, bunu kontrol etmek zorunda kalabilirim.

Birden fazla CSS dosyasını tercih ederim. Bu şekilde "kaplamaları" istediğiniz gibi takas etmek daha kolay olur. Monolitik bir dosyadaki sorun, kontrolden çıkabilmesi ve yönetilmesi zor olmasıdır. Mavi arka planlar istiyorsanız, ancak düğmelerin değişmesini istemiyorsanız ne olur? Arka plan dosyanızı değiştirin. Vb.

Belki de açık kaynak kodlu bir CSS yazma çerçevesi olan pusulaya bir göz atın . Sass'a dayanır, bu nedenle değişkenler, yuvalama, mixins ve ithalat gibi harika şeyleri destekler. Özellikle küçük CSS dosyalarını ayrı tutmak, ancak otomatik olarak 1'de birleştirmek istiyorsanız (birden çok yavaş HTTP çağrısından kaçınmak) içe aktarma yararlıdır. Compass, buna, tarayıcılar arası şeyleri işlemek için kolay olan önceden tanımlanmış büyük bir karışım kümesi ekler. Ruby'de yazılmıştır, ancak herhangi bir sistemle kolayca kullanılabilir ....

İşte en iyi yol:

1. tüm paylaşılan kodlarla genel bir css dosyası oluştur
2. tüm belirli sayfa css kodlarını aynı sayfaya, etikete veya her sayfa için style = "" özelliğini kullanarak ekleyin

bu şekilde tüm paylaşılan kod ve bir html sayfası ile sadece bir css var. Bu arada (ve bunun doğru konu olmadığını biliyorum) ayrıca base64'deki resimlerinizi kodlayabilirsiniz (ancak js ve css dosyalarınızla da yapabilirsiniz). bu şekilde daha fazla http isteğini 1'e düşürürsünüz.

SASS ve LESS tüm bunları gerçekten tartışmalı bir nokta yapıyor. Geliştirici etkili bileşen dosyaları kurabilir ve derlemede hepsini birleştirebilir. SASS'ta, daha kolay okuma için Geliştirme sırasında Sıkıştırılmış Mod'u kapatabilir ve üretim için tekrar açabilirsiniz.

http://sass-lang.com http://lesscss.org

Sonunda, kullandığınız tekniğe bakılmaksızın tek bir küçültülmüş CSS dosyası istersiniz. Daha az CSS, Daha az HTTP isteği, Sunucuda Daha Az Talep.

Tek bir CSS dosyasının avantajı transfer verimliliğidir. Her HTTP isteği, istenen her dosya için bir HTTP üstbilgisi yanıtı anlamına gelir ve bant genişliği alır.

Ben HTTP başlığında "text / css" mime türü ile bir PHP dosyası olarak benim CSS hizmet. Bu şekilde sunucu tarafında birden fazla CSS dosyası olabilir ve kullanıcı tarafından istendiğinde tek bir dosyaya onları itmek için PHP içerir kullanın. Her modern tarayıcı .php dosyasını CSS kodu ile alır ve .css dosyası olarak işler.

Performans için sadece bir css dosyası kullanabilir ve ardından aşağıdaki gibi bölümlere yorum yapabilirsiniz:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

vb

Ben kullanıyorum Jammit benim css dosyaları ile uğraşmak ve okunabilmesi için birçok farklı dosyaları kullanmak. Jammit, üretimde devreye alınmadan önce dosyaları birleştirme ve sıkıştırma işleminin tüm kirli işlerini yapar. Bu şekilde, geliştirme aşamasında birçok dosyam var, ancak üretimde yalnızca bir dosya var.

Birlikte verilen bir stil sayfası sayfa yükleme performansını kaydedebilir, ancak ne kadar çok stil olursa, tarayıcı bulunduğunuz sayfada animasyonları o kadar yavaş hale getirir. Bu, bulunduğunuz sayfada bulunmayan, ancak tarayıcının hala hesaplaması gereken çok sayıda kullanılmayan stilden kaynaklanır.

Bkz. Https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Birlikte verilen stil sayfaları avantajları: - sayfa yükleme performansı

Birlikte verilen stil sayfaları dezavantajları: - kaydırma, etkileşim, animasyon sırasında choppyness'e neden olabilecek daha yavaş davranış,

Sonuç: Her iki sorunu da çözmek için, üretim için ideal çözüm, tüm css'leri http isteklerine kaydetmek için tek bir dosyada paketlemektir, ancak o dosyadan çıkarmak için javascript, bulunduğunuz sayfanın css'i ve başını güncellemektir. .

Sayfa başına hangi paylaşılan bileşenlerin gerekli olduğunu bilmek ve karmaşıklığı azaltmak için, bu sayfanın kullandığı tüm bileşenleri beyan etmek güzel olurdu - örneğin:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

CSS geliştirmeye sistematik bir yaklaşım oluşturdum. Bu şekilde asla değişmeyen bir standart kullanabilirim. İlk olarak 960 ızgara sistemi ile başladım. Sonra temel düzenler, kenar boşlukları, dolgu, yazı tipleri ve boyutları için tek satır css oluşturdum. Daha sonra bunları gerektiği gibi birleştiririm. Bu, tüm projelerim boyunca tutarlı bir düzen tutmamı ve aynı css dosyalarını tekrar tekrar kullanmamı sağlıyor. Çünkü spesifik değiller. İşte bir örnek: ---- div class = "c12 bg0 m10 p5 beyaz fl" / div --- Bu, kabın 12 sütun boyunca olduğu anlamına gelir, bg0, metnin 10 piksel dolgusunun kenar boşluklarına sahip olduğunu ve yüzer olduğunu gösterir ayrıldı. Bunu kaldırarak veya yeni bir "hafif" tarzı dediğim - ekleyerek kolayca değiştirebilir Tüm bu nitelikleri ile tek bir sınıf oluşturmak yerine; Sayfayı kodlarken tek stilleri birleştiriyorum. Bu, herhangi bir stil kombinasyonu oluşturmama izin veriyor ve yaratıcılığımı sınırlamıyor veya benzer çok sayıda stil oluşturmama neden oluyor. Stil sayfalarınız çok daha yönetilebilir, en aza indirgenir ve tekrar tekrar kullanmanıza olanak tanır. Bu yöntem hızlı tasarım için harika buldum. Ayrıca artık ilk olarak PSD'de değil, aynı zamanda zamandan tasarruf sağlayan tarayıcıda da tasarım yapıyorum. Buna ek olarak, aynı zamanda arka planlarım ve sayfa tasarımı özellikleri için bir adlandırma sistemi oluşturduğum için, yeni bir proje oluştururken görüntü dosyamı değiştiriyorum. (Bg0 = adlandırma sistemime göre gövde arka planı) Bu, daha önce beyazım varsa bir projenin arka planı sadece siyah olarak değiştirmek, bir sonraki projede bg0'ın siyah bir arka plan veya başka bir görüntü olacağı anlamına gelir ...