Haruskah saya membagi file kueri media CSS besar menjadi file terpisah untuk setiap ukuran layar?

Saya sedang mengerjakan situs web desain yang responsif untuk memberikan konten untuk semua ukuran layar. Saya memiliki pertanyaan media untuk 5 "langkah" yang berbeda, dan file CSS sekitar 30 Kb.

Akan lebih baik untuk membagi ini menjadi file yang terpisah dan membuatnya mirip dengan ini:

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

atau haruskah saya menyimpannya dalam satu file CSS?

Pembaruan: Saya hanya ingin menambahkan, bahwa perhatian utama saya adalah lintas browser / kecepatan pembukaan halaman / rendering perangkat, bukan kemudahan pengembangan.

Saya pikir itu benar-benar tergantung pada apa yang Anda temukan paling mudah untuk pengembangan dan apa yang membantu Anda menjaga stylesheet yang rapi.

Satu-satunya downside nyata yang dapat saya pikirkan dalam pemisahan adalah bahwa jika atribut elemen muncul di semua stylesheet Anda, Anda harus memperbarui 5 file terpisah untuk mengubahnya (daripada muncul berdampingan di satu tempat).

Menurut jawaban pada posting ini, browser akan mengunduh semua stylesheet, jadi pemecahan pada resolusi bukanlah penghemat bandwidth: /programming/16657159/when-using-media-queries-does-a -phone-load-non-relevent-queries-and-images

Ini sedikit tergantung pada apa yang ingin Anda capai: apakah Anda mencoba untuk membuat memuat halaman Anda lebih cepat atau Anda mencoba membuat pengembangan lebih mudah?

Jika Anda menargetkan yang terakhir, daripada Anda bisa menggunakan beberapa lembar, tapi itu semua masalah preferensi. Saya merasa paling mudah untuk menggunakan satu file besar karena ini memberi Anda gambaran dari semua gaya yang telah Anda nyatakan.

Jika Anda ingin halaman pemuatan yang lebih cepat daripada taruhan terbaik Anda adalah untuk meminimalkan jumlah permintaan, karena overhead permintaan cukup besar. Selanjutnya Anda dapat menyimpan versi pengembangan untuk diri Anda sendiri dan melayani css yang diminimalkan ke web (saya menemukan YUI metode yang bagus: http://www.refresh-sf.com/yui/ ).

Selanjutnya saya akan mencoba mengoptimalkan css itu sendiri. Anda dapat mencoba menggabungkan kelas yang sangat mirip, misalnya:

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

Dapat dikonversi menjadi:

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

Satu-satunya hal adalah Anda harus mengubah sedikit html dari <span class="bold-and-italic">foo bar</span>menjadi<span class="bold italic">foo bar</span>

Saya dengan tegas menyarankan Anda untuk melihat Bootstrap ( http://getbootstrap.com ), orang-orang ini telah melakukan pekerjaan yang hebat dalam memecah kelas menjadi beberapa 'sub-kelas'.

Saya harap ini membantu.

Mungkin yang terbaik hanya memiliki satu file CSS, tetapi untuk memperkecil dan gzip. Dengan asumsi 30KB Anda sebelum melakukan itu, Anda mungkin akan mendapatkan ukuran file menjadi sekitar 5KB dengan minifikasi (penghilangan spasi putih) dan gzipping.

Berpisah mungkin akan membuat Anda lebih cepat, tetapi hanya dalam beberapa kondisi.

• Anda harus memastikan bahwa hanya satu stylesheet yang dimuat pada setiap waktu - jika tidak, Anda akan membutuhkan dua atau lebih permintaan HTTP, yang memiliki overhead sendiri, yang setidaknya akan meniadakan sebagian keuntungan dari ukuran file yang lebih kecil. Untuk melakukan ini, tidak cukup hanya dengan membagi stylesheet dan menyisipkan beberapa- <link>tag dengan atribut media yang berbeda, Browser tampaknya memuat semua <link>ed stylesheet terlepas dari kueri media (terima kasih kepada @cimmanon untuk info ini, tidak tahu itu) .
• Jumlah aturan CSS yang dibagikan di antara style sheet harus kecil - jika tidak, masing-masing dari beberapa style sheet harus mengandung semua aturan umum dan dengan demikian akan memiliki ukuran hampir seperti aslinya.
• Anda menggunakan preprocessor CSS (atau yang serupa), sehingga dapat dikelola untuk memiliki potongan kode yang sama dalam 5 stylesheet.

Juga: Jangan optimalkan secara prematur. Lakukan hanya jika Anda memiliki masalah kinerja.

Anda harus membagi file CSS Anda berdasarkan permintaan media karena file CSS membuat pemblokiran.

Ketika browser sedang membangun DOM Anda, ia harus menunggu dan memuat semua file CSS Anda terlebih dahulu. Anda akan mengurangi waktu pemuatan halaman Anda jika beberapa file CSS Anda hanya dimuat berdasarkan permintaan media tertentu.

Ini juga berlaku untuk menambahkan async ke tag skrip JavaScript; mis <script src='myfile.js' async></script>.:

DOM tidak harus menunggu file JS Anda dimuat. Hanya tambahkan async jika konstruksi DOM Anda tidak memerlukan JavaScript apa pun saat memuat.

Saya cenderung mengatakan ini.

Untuk produksi, selalu simpan dalam satu file; alasannya adalah karena lebih efisien untuk browser, dan itu harus menjadi minat utama Anda (IMO) ketika berpindah dari pengembangan ke produksi.

Pengembangan ketel ikan berbeda. Saya cenderung membagi kueri Media sehingga mereka dengan elemen apa pun, misalnya:

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

Seperti umumnya jika saya mengubah elemen, saya tidak ingin harus mencari-cari tempat CSS (walaupun Anda dapat menggunakan sesuatu seperti grep ...).

Tapi , satu hal yang akan saya katakan adalah layak untuk mempertimbangkan situs itu sendiri, proses pengembangan dan lebih lembut. Jika Anda benar-benar berpikir bahwa ada baiknya memisahkan mereka ke file berbasis ukuran layar, cobalah. Buat salinan situs (jika mungkin), mainkan salinannya - jika membuatnya lebih mudah, gunakan itu. Anda tidak perlu mengikuti paradigma satu ukuran untuk semua tentang bagaimana mengembangkan situs web.

Sederhana: gunakan 1 stylesheet dan cukup tambahkan komentar untuk membuatnya lebih mudah untuk menemukan dan mengubah gaya CSS misalnya:

//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

Jika mau, Anda bisa menggunakan beberapa stylesheet dan memanggilnya untuk setiap ukuran tertentu.

Saya lebih suka melihat Bootstrap . Ini adalah 1 file CSS yang berisi semua CSS. Ini bekerja pada hampir 99% browser dan sangat responsif.

Klik pada demo langsung untuk memperbesar ( Ctrl += memperbesar, Ctrl -= memperkecil, Ctrl 0= normal) atau membukanya di ponsel Anda untuk melihat bagaimana tampilannya.