Her ekran boyutu için büyük bir CSS medya sorguları dosyasını ayrı dosyalara mı bölmeliyim?

Tüm ekran boyutları için içerik sunmak üzere duyarlı bir tasarım web sitesinde çalışıyorum. 5 farklı "adım" için medya sorgularım var ve CSS dosyası yaklaşık 30 Kb.

Bunu ayrı dosyalara bölmek ve buna benzer yapmak daha iyi olur mu?

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

ya da bunları tek bir CSS dosyasında tutmalı mıyım?

Güncelleme: Sadece eklemek istediğim, ana endişem çapraz tarayıcı / cihaz sayfası açma / oluşturma hızı, geliştirme kolaylığı değil.

Bence bu gerçekten geliştirme için en kolay bulduğunuz şeye ve düzenli bir stil sayfası tutmanıza neyin yardımcı olduğuna bağlı.

Bölünmeyi düşünebileceğim tek gerçek dezavantajı, bir öğenin niteliğinin tüm stil sayfalarınızda görünmesi durumunda, değiştirmek için 5 ayrı dosyayı güncellemeniz (tek bir yerde yan yana görünmek yerine) olacaktır.

Bu yayının cevabına göre, tarayıcılar ne olursa olsun tüm stil sayfalarını indirecek, bu yüzden çözünürlüğü bölmek bir bant genişliği tasarrufu değil: /programming/16657159/when-using-media-queries-does-a -telefon-yük olmayan Alakalı-sorguları-ve-images

Bu biraz neyi başarmak istediğinize bağlıdır: sayfanızın daha hızlı yüklenmesini mi yoksa gelişmeyi kolaylaştırmaya mı çalışıyorsunuz?

İkincisini hedefliyorsanız, birden fazla sayfa kullanabilirsiniz, ancak bu bir tercih meselesidir. Büyük bir dosyayı kullanmanın en kolay yolunu buldum, çünkü bu size beyan ettiğiniz tüm stiller hakkında genel bir bakış sunuyor.

En iyi bahsinizden daha hızlı bir yükleme sayfası istiyorsanız, bir istek yükü oldukça büyük olduğundan istek miktarını en aza indirmek olacaktır. Ayrıca kendiniz için bir geliştirme sürümü tutabilir ve web için minimize edilmiş bir css hizmet edebilirim (YUI'yi iyi bir yöntem olarak görüyorum: http://www.refresh-sf.com/yui/ ).

Ayrıca css kendisini optimize etmeye çalışacağım. Çok benzer sınıfları birleştirmeyi deneyebilirsiniz, örneğin:

.bold-and-italic { font-weight: bold; text-style: italic; }

Şu biçime dönüştürülebilir:

.bold { font-weight: bold; }
.italic { text-style: italic; }

Tek şey biraz html değiştirmek zorunda olduğunu <span class="bold-and-italic">foo bar</span>içine<span class="bold italic">foo bar</span>

Bootstrap'a ( http://getbootstrap.com ) bir göz atmanızı şiddetle tavsiye edebilirim , bu adamlar sınıfları birden çok 'alt sınıfa' ayırmada harika bir iş çıkardı.

Umarım bu yardımcı olur.

Sadece bir CSS dosyasına sahip olmak, ancak küçültmek ve gzip etmek en iyisidir. 30KB'nizin bunu yapmadan önce olduğunu varsayarsak, büyük olasılıkla küçültme (boşluk kaldırma) ve gzipping ile dosya boyutunu yaklaşık 5 KB'ye indirirsiniz.

Ayrılmak muhtemelen size biraz daha hız kazandıracak, ancak sadece bazı koşullar altında.

• Her seferinde yalnızca bir stil sayfasının yüklendiğinden emin olmanız gerekir; aksi takdirde, kendileri ek yükü olan iki veya daha fazla HTTP isteğine ihtiyacınız olur, bu da en azından daha küçük dosya boyutundan kazancı kısmen reddeder. Bunu yapmak için, stil sayfasını bölmek ve farklı medya özniteliklerine sahip birden fazla etiket eklemek yeterli değildir<link> , Tarayıcılar <link>medya sorgularından bağımsız olarak tüm ed stil sayfalarını yüklüyor (bu bilgi için @cimmanon sayesinde bunu bilmiyordum) .
• Stil sayfaları arasında paylaşılan CSS kurallarının sayısı az olmalıdır - aksi takdirde birden fazla stil sayfasının tüm ortak kuralları içermesi gerekir ve bu nedenle neredeyse orijinalin boyutuna sahip olur.
• Bir CSS ön işlemcisi (veya benzer bir şey) kullanırsınız, bu nedenle 5 stil sayfasında aynı kod parçalarına sahip olmak yönetilebilir.

Ayrıca: Zamanından önce optimize etmeyin. Bunu yalnızca performans sorunlarınız varsa yapın.

CSS dosyalarınızı oluşturma engellemesi nedeniyle CSS dosyalarınızı medya sorgularına göre ayırmalısınız.

Tarayıcı DOM'nizi oluştururken, önce tüm CSS dosyalarınızı beklemesi ve yüklemesi gerekir. Bazı CSS dosyalarınız yalnızca belirli medya sorgularına dayanarak yüklenirse, sayfa yükleme sürenizi azaltırsınız.

Bu, bir JavaScript komut dosyası etiketine zaman uyumsuzluk eklemek için de geçerlidir; ör <script src='myfile.js' async></script>.:

DOM, JS dosyanızın yüklenmesini beklemek zorunda değildir. Yalnızca DOM'nizin yapısı yüklenirken bu JavaScript'ten herhangi birine ihtiyaç duymuyorsa zaman uyumsuzluk ekleyin.

Bunu söylemeye meyilli olurum.

Üretim için her zaman tek bir dosyada saklayın; bunun nedeni tarayıcı için daha verimli olması ve geliştirmeden üretime geçerken birincil ilgi alanınız (IMO) olması.

Geliştirme farklı bir balık su ısıtıcısı. Herhangi bir öğeye göre medya sorguları bölme eğilimindedir, örneğin:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Genellikle bir öğeyi değiştiriyorsam, CSS için her yerde avlanmak zorunda kalmak istemiyorum (grep gibi bir şey kullanabilirsiniz ...).

Ancak , söyleyeceğim bir şey, sitenin kendisini, geliştirme sürecini ve soforth'u dikkate almaya değer. Bunları ekran boyutuna dayalı dosyalara ayırmaya değeceğini gerçekten düşünüyorsanız, bir deneyin. Sitenin bir kopyasını oluşturun (mümkünse), kopyayla bir oyun oynayın - daha kolay hale getirirse bunu kullanın. Bir web sitesinin nasıl geliştirileceğine dair tek bedenli bir paradigma izlemenize gerek yoktur.

Basit: 1 stil sayfasını kullanın ve CSS stillerini bulmayı ve değiştirmeyi kolaylaştırmak için yalnızca yorum ekleyin:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

İsterseniz, birden fazla stil sayfası kullanabilir ve bunları her belirli boyut için arayabilirsiniz.

Bootstrap'a bakmayı tercih ederim . Tüm CSS'yi içeren 1 CSS dosyasıdır. Tarayıcıların neredeyse% 99'unda çalışır ve son derece duyarlıdır.

Canlı demoyu yakınlaştırmak için ( Ctrl += yakınlaştırma, Ctrl -= uzaklaştırma, Ctrl 0= normal) tıklayın veya nasıl görüntülendiğini görmek için mobil cihazınızda açın.