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


19

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.


Apakah grunt / webpack / plugin apa pun yang ada untuk mengambil file css tunggal dan membaginya menjadi beberapa file yang dipisahkan oleh kueri media? Maka Anda bisa dibilang mendapatkan kemudahan pengembangan yang diberikan oleh satu file monolith dan juga kecepatan optimalisasi file yang terpisah.
Kevin Wheeler

Jawaban:


16

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


Di pos yang Anda tautkan, tahukah Anda apa yang ia maksud dengan "ini adalah batasan dari CSSOM"?
DisgruntledGoat

1
CSS Object Model - dev.w3.org/csswg/cssom - Saya percaya ini mendefinisikan bagaimana CSS harus ditangani, dan jadi saya pikir batasan yang dia maksudkan adalah tidak memiliki model yang menangani gaya seperti itu dengan lebih hemat bandwidth. cara.
Richard B

3
Meskipun ini bukan penghemat unduhan, ini ada beberapa cara. Peramban akan memprioritaskan tautan kueri media yang cocok daripada yang tidak cocok. File css yang cocok akan memblokir rendering halaman sementara yang tidak cocok mendapat prioritas yang lebih rendah oleh browser untuk mengunduh dan tidak memblokir rendering halaman sama sekali. Juga setelah itu berpisah Anda dapat menggunakan js untuk mengunduh secara kondisional jika Anda ingin menyimpan dan bandwidth.
dalore

4

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.


1
Kelas dinamai gaya adalah bentuk yang buruk. Mungkin juga hanya memasukkan atribut gaya jika Anda akan melakukannya. Lebih baik beri nama kelas logis. Seperti.important
dalore

4

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.


3
Perlu dicatat bahwa jika Anda menggunakan <link rel="stylesheet" />tag untuk semua file spesifik kueri media Anda, Anda tidak akan dapat mencegah browser mengunduh mereka. Anda harus menggunakan sniffing peramban di sisi server atau menggunakan JavaScript untuk memeriksa dimensi viewport dan menyuntikkan style sheet yang sesuai. Tak satu pun dari ini adalah pilihan yang baik.
cimmanon

1
Saya sedikit terkejut, tetapi Anda benar - saya pikir menambahkan atribut media ke <link>-tag akan mencegah pemuatan stylesheet yang tidak cocok. Mengapa browser melakukan itu? Ini tentu saja merupakan alasan paling penting untuk tidak membagi stylesheet.
Jost

Mereka melakukannya karena layar Anda dapat berubah, bagaimana jika Anda menggunakan ponsel dan Anda memutarnya dari potret ke lanskap, tiba-tiba lebar layar Anda berbeda. Atau di desktop Anda dapat mengubah ukuran jendela browser Anda, atau seret jendela Anda ke layar lain jika Anda memiliki beberapa pengaturan monitor. Jika browser tidak mengunduh semua aset CSS terlebih dahulu, akan ada keterlambatan dalam merender ulang halaman jika dan ketika salah satu tindakan di atas terjadi
MrCarrot

Lebih baik memisahkan mereka. Sebagian besar peramban akhir-akhir ini adalah peramban spdy (situs Anda, https dan spdy seperti semestinya) dan dengan beberapa koneksi spdy digandakan ke dalam koneksi yang sama sehingga jumlah file tidak penting sekarang. Browser juga akan menempatkan file media css yang tidak sesuai dengan prioritas yang lebih rendah untuk mengunduh dan yang lebih penting tidak akan MEMBLOKIR halaman render.
dalore

3

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 telah mendengarnya mengklaim bahwa jika Anda benar-benar tidak ingin skrip async Anda berpotensi menunda rendering, jalankan di window.onload acara alih-alih menggunakan async.
Kevin Wheeler

2

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.


1

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.


-1

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.


2
Dia sudah menulis 30kb CSS, bagaimana bisa beralih ke bootstrap mungkin bermanfaat?
Steve Sanders

Dengan kata lain, ya saya setuju 30kb css adalah misi untuk mengulang. Saya hanya akan menyalin dan menempelkannya ke stylesheet yang berbeda, semua tergantung pada bagaimana strukturnya Anda dapat menduplikasi dan mengganti nama file css dan menghapus semua bagian yang tidak perlu.
Seputar Ogies Myburgh
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.