File .css besar tunggal vs. beberapa file .css spesifik yang lebih kecil? [Tutup]

Apakah ada keuntungan memiliki file .css monster tunggal yang berisi elemen gaya yang akan digunakan di hampir setiap halaman?

Saya berpikir bahwa untuk kemudahan manajemen, saya ingin menarik berbagai jenis CSS ke beberapa file, dan memasukkan setiap file dalam file utama saya <link />apakah itu buruk?

Saya pikir ini lebih baik

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

vs.

1. site.css

Pernahkah Anda melihat gotcha dengan melakukannya satu arah vs yang lain?

Kompiler CSS seperti Sass atau KURANG adalah cara terbaik untuk melakukannya. Dengan begitu Anda akan dapat memberikan file CSS tunggal yang diperkecil untuk situs (yang akan jauh lebih kecil dan lebih cepat daripada file sumber CSS tunggal normal), sambil mempertahankan lingkungan pengembangan terbaik, dengan segala sesuatu terpecah menjadi komponen.

Sass dan KURANG memiliki keunggulan tambahan variabel, bersarang dan cara-cara lain untuk membuat CSS lebih mudah untuk ditulis dan dipelihara. Sangat, sangat direkomendasikan. Saya pribadi menggunakan Sass (sintaks SCSS) sekarang, tetapi menggunakan KURANG sebelumnya. Keduanya hebat, dengan manfaat serupa. Setelah Anda menulis CSS dengan kompiler, tidak mungkin Anda ingin melakukannya tanpa itu.

http://lesscss.org

http://sass-lang.com

Jika Anda tidak ingin dipusingkan dengan Ruby, kompiler KURANG untuk Mac ini hebat:

http://incident57.com/less/

Atau Anda bisa menggunakan CodeKit (oleh orang yang sama):

http://incident57.com/codekit/

WinLess adalah GUI Windows untuk comipiling KURANG

http://winless.org/

Ini sulit dijawab. Kedua opsi memiliki pro dan kontra menurut saya.

Saya pribadi tidak suka membaca satu file CSS BESAR, dan mempertahankannya sangat sulit. Di sisi lain, membaginya menyebabkan permintaan http tambahan yang berpotensi memperlambat segalanya.

Pendapat saya akan menjadi salah satu dari dua hal.

1) Jika Anda tahu bahwa CSS Anda TIDAK AKAN PERNAH berubah begitu Anda membangunnya, saya akan membuat beberapa file CSS pada tahap pengembangan (agar mudah dibaca), dan kemudian menggabungkannya secara manual sebelum ditayangkan (untuk mengurangi permintaan http)

2) Jika Anda tahu bahwa Anda akan mengubah CSS Anda sesekali, dan perlu membuatnya mudah dibaca, saya akan membuat file terpisah dan menggunakan kode (asalkan Anda menggunakan semacam bahasa pemrograman) untuk menggabungkannya di runtime build time (runtime minification / kombinasi adalah babi sumber daya).

Dengan opsi mana pun saya akan sangat menyarankan caching di sisi klien untuk lebih mengurangi permintaan http.

EDIT:
Saya menemukan blog ini yang menunjukkan cara menggabungkan CSS saat runtime menggunakan kode. Layak untuk dilihat (meskipun saya belum mengujinya sendiri).

EDIT 2:
Saya telah memutuskan untuk menggunakan file terpisah dalam waktu desain saya, dan proses pembuatan untuk memperkecil dan menggabungkan. Dengan cara ini saya dapat memiliki css yang terpisah (dikelola) sementara saya mengembangkan dan file minified monolitik yang tepat saat runtime. Dan saya masih memiliki file statis saya dan kurang overhead sistem karena saya tidak melakukan kompresi / minifikasi saat runtime.

Catatan: untuk Anda pembeli di luar sana, saya sangat menyarankan menggunakan bundler sebagai bagian dari proses pembuatan Anda. Apakah Anda membangun dari dalam IDE Anda, atau dari skrip build, bundler dapat dijalankan pada Windows melalui yang disertakan exeatau dapat dijalankan pada mesin apa pun yang sudah menjalankan node.js.

Saya lebih suka beberapa file CSS selama pengembangan. Manajemen dan debugging jauh lebih mudah. Namun, saya menyarankan agar saat penyebaran Anda alih-alih menggunakan alat minify CSS seperti YUI Compressor yang akan menggabungkan file CSS Anda menjadi satu file monolitik.

Anda menginginkan kedua dunia.

Anda ingin banyak file CSS karena kewarasan Anda adalah hal yang sangat buruk.

Pada saat yang sama, lebih baik memiliki satu file besar.

Solusinya adalah memiliki beberapa mekanisme yang menggabungkan beberapa file menjadi satu file.

Salah satu contohnya adalah seperti

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

Kemudian, skrip allcss.php menangani penggabungan file dan mengirimkannya.

Idealnya, skrip akan memeriksa tanggal mod pada semua file, membuat komposit baru jika ada yang berubah, kemudian mengembalikan komposit itu, dan kemudian memeriksa terhadap header HTTP Jika Dimodifikasi agar tidak mengirim CSS yang berlebihan.

Ini memberi Anda yang terbaik dari kedua dunia. Berfungsi bagus untuk JS juga.

Hanya memiliki satu file CSS lebih baik untuk memuat waktu halaman Anda, karena itu berarti lebih sedikit permintaan HTTP.

Memiliki beberapa file CSS kecil berarti pengembangan lebih mudah (setidaknya, saya kira begitu: memiliki satu file CSS per modul aplikasi Anda membuat segalanya lebih mudah) .

Jadi, ada alasan bagus dalam kedua kasus ...

Solusi yang memungkinkan Anda mendapatkan yang terbaik dari kedua ide tersebut adalah:

• Untuk mengembangkan menggunakan beberapa file CSS kecil
  • yaitu lebih mudah dikembangkan
• Untuk memiliki proses pembuatan aplikasi Anda, itu "menggabungkan" file-file itu menjadi satu
  • Proses pembangunan itu juga dapat memperkecil file besar itu, btw
  • Ini jelas berarti bahwa aplikasi Anda harus memiliki beberapa hal konfigurasi yang memungkinkannya beralih dari "mode multi-file" ke "mode mono-file".
• Dan untuk digunakan, dalam produksi, hanya file besar
  • yaitu memuat halaman lebih cepat

Ada juga beberapa perangkat lunak yang melakukan itu menggabungkan file CSS pada saat run-time, dan tidak pada build-time; tetapi melakukannya pada saat run-time berarti makan lebih banyak CPU (dan obvisouly membutuhkan mekanisme caching, untuk tidak terlalu sering menghasilkan file besar)

Secara historis, salah satu keunggulan utama x dalam memiliki satu file CSS adalah manfaat kecepatan ketika menggunakan HTTP1.1.

Namun, pada Maret 2018, lebih dari 80% browser sekarang mendukung HTTP2 yang memungkinkan browser untuk mengunduh banyak sumber daya secara bersamaan serta mampu mendorong sumber daya secara pre-emptive. Memiliki satu file CSS untuk semua halaman berarti lebih besar dari ukuran file yang diperlukan. Dengan desain yang tepat, saya tidak melihat keuntungan dalam melakukan ini selain lebih mudah untuk dikodekan.

Desain ideal untuk HTTP2 untuk kinerja terbaik adalah:

• Memiliki file CSS inti yang berisi gaya umum yang digunakan di semua halaman.
• Memiliki CSS khusus halaman dalam file terpisah
• Gunakan HTTP2 push CSS untuk meminimalkan waktu tunggu (cookie dapat digunakan untuk mencegah dorongan berulang)
• Secara terpisah pisahkan di atas CSS lipat dan dorong ini dulu dan muat sisa CSS nanti (berguna untuk perangkat seluler dengan bandwidth rendah)
• Anda juga dapat memuat sisa CSS untuk situs atau halaman tertentu setelah halaman dimuat jika Anda ingin mempercepat pemuatan halaman berikutnya.

Lembar gaya Monolitik menawarkan banyak manfaat (yang dijelaskan dalam jawaban lain), namun tergantung pada ukuran keseluruhan dokumen lembar gaya Anda bisa mengalami masalah di IE. IE memiliki batasan dengan berapa banyak pemilih akan membaca dari satu file . Batasnya adalah 4096 penyeleksi. Jika Anda memiliki stylesheet monolitik lebih dari ini, Anda ingin membaginya. Keterbatasan ini hanya membuat kepala jelek di IE.

Ini untuk semua versi IE.

Lihat halaman Ross Bruniges Blog dan MSDN AddRule .

Ada titik kritis di mana menguntungkan memiliki lebih dari satu file css.

Situs dengan halaman 1M +, yang rata-rata hanya akan dilihat oleh pengguna 5, mungkin memiliki lembar gaya dengan proporsi yang sangat besar, jadi mencoba menyimpan overhead dari satu permintaan tambahan per beban halaman dengan memiliki unduhan awal yang masif adalah salah ekonomi.

Regangkan argumen hingga batas ekstrem - ini seperti menyarankan bahwa harus ada satu stylesheet besar yang dipelihara untuk seluruh web. Jelas tidak masuk akal.

Titik kritis akan berbeda untuk setiap situs sehingga tidak ada aturan yang keras dan cepat. Ini akan tergantung pada jumlah unik css per halaman, jumlah halaman, dan jumlah halaman yang rata-rata mungkin ditemui pengguna saat menggunakan situs ini.

Saya biasanya memiliki beberapa file CSS:

• file css "global" untuk mengatur ulang dan gaya global
• "modul" file css khusus untuk halaman yang secara logis dikelompokkan (mungkin setiap halaman dalam panduan checkout atau sesuatu)
• "halaman" file css khusus untuk penggantian pada halaman (atau, letakkan ini di blok pada halaman individual)

Saya tidak terlalu peduli dengan beberapa permintaan halaman untuk file CSS. Kebanyakan orang memiliki bandwidth yang layak dan saya yakin ada optimasi lain yang akan memiliki dampak yang jauh lebih besar daripada menggabungkan semua gaya menjadi satu file CSS monolitik. Imbalannya adalah antara kecepatan dan perawatan, dan saya selalu condong ke arah pemeliharaan. Comperssor YUI kedengarannya cukup keren, saya mungkin harus memeriksanya.

Saya lebih suka beberapa file CSS. Dengan begitu, lebih mudah menukar "kulit" ke dalam dan ke luar sesuai keinginan Anda. Masalah dengan satu file monolitik adalah ia bisa lepas kendali dan sulit dikelola. Bagaimana jika Anda ingin latar belakang biru tetapi tidak ingin tombol berubah? Ubah saja file latar belakang Anda. Dll

Mungkin lihat kompas , yang merupakan kerangka penulisan CSS sumber terbuka. Ini didasarkan pada Sass sehingga mendukung hal-hal keren seperti variabel, bersarang, mixin, dan impor. Terutama impor berguna jika Anda ingin menyimpan file CSS yang lebih kecil tetapi digabungkan menjadi 1 secara otomatis (menghindari beberapa panggilan HTTP lambat). Kompas menambahkan ini sejumlah besar mixin yang sudah ditentukan sebelumnya yang mudah untuk menangani hal-hal lintas browser. Itu ditulis dalam Ruby tetapi dapat dengan mudah digunakan dengan sistem apa pun ....

di sini adalah cara terbaik:

1. buat file css umum dengan semua kode bersama
2. masukkan semua kode css halaman tertentu ke halaman yang sama, pada tag atau gunakan style style = "" untuk setiap halaman

dengan cara ini Anda hanya memiliki satu css dengan semua kode bersama dan halaman html. ngomong-ngomong (dan saya tahu bahwa ini bukan topik yang tepat) Anda juga dapat menyandikan gambar Anda di base64 (tetapi Anda juga dapat melakukannya dengan file js dan css Anda). dengan cara ini Anda mengurangi lebih banyak permintaan http menjadi 1.

SASS dan KURANG membuat ini semua benar-benar titik diperdebatkan. Pengembang dapat mengatur file komponen yang efektif dan saat kompilasi menggabungkan semuanya. Dalam SASS Anda dapat mematikan Mode Terkompresi saat dalam pengembangan agar lebih mudah dibaca, dan mengaktifkannya kembali untuk produksi.

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

Pada akhirnya satu file CSS yang diperkecil adalah apa yang Anda inginkan terlepas dari teknik yang Anda gunakan. Lebih sedikit CSS, Lebih sedikit permintaan HTTP, Lebih sedikit Permintaan di server.

Keuntungan satu file CSS adalah efisiensi transfer. Setiap permintaan HTTP berarti respons header HTTP untuk setiap file yang diminta, dan itu membutuhkan bandwidth.

Saya melayani CSS saya sebagai file PHP dengan tipe mime "text / css" di header HTTP. Dengan cara ini saya dapat memiliki beberapa file CSS di sisi server dan menggunakan PHP termasuk untuk mendorong mereka ke dalam satu file ketika diminta oleh pengguna. Setiap browser modern menerima file .php dengan kode CSS dan memprosesnya sebagai file .css.

Anda bisa menggunakan satu file css untuk kinerja dan kemudian mengomentari bagian seperti ini:

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

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


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

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

dll

Saya menggunakan Jammit untuk menangani file css saya dan menggunakan banyak file berbeda untuk dibaca. Jammit melakukan semua pekerjaan kotor menggabungkan dan mengompresi file sebelum penyebaran produksi. Dengan cara ini, saya punya banyak file dalam pengembangan tetapi hanya satu file dalam produksi.

Lembar gaya yang dibundel dapat menghemat kinerja pemuatan laman, tetapi semakin banyak gaya, semakin lambat peramban membuat animasi pada laman tempat Anda berada. Ini disebabkan oleh sejumlah besar gaya yang tidak digunakan yang mungkin tidak ada di halaman tempat Anda berada tetapi browser masih harus menghitung.

Lihat: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

Keunggulan stylesheet yang dibundel: - kinerja pemuatan laman

Kerugian stylesheet yang dibundel: - Perilaku lebih lambat, yang dapat menyebabkan ketidakseimbangan selama pengguliran, interaktivitas, animasi,

Kesimpulan: Untuk menyelesaikan kedua masalah, untuk produksi solusi yang ideal adalah menggabungkan semua css ke dalam satu file untuk disimpan pada permintaan http, tetapi gunakan javascript untuk mengekstrak dari file itu, css untuk halaman tempat Anda berada dan perbarui head dengannya. .

Untuk mengetahui komponen bersama mana yang diperlukan per halaman, dan untuk mengurangi kerumitan, alangkah baiknya jika telah mendeklarasikan semua komponen yang digunakan halaman ini - misalnya:

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

Saya telah membuat pendekatan sistematis untuk pengembangan CSS. Dengan cara ini saya bisa memanfaatkan standar yang tidak pernah berubah. Pertama saya mulai dengan sistem grid 960. Lalu saya membuat satu baris css untuk tata letak dasar, margin, padding, font dan ukuran. Saya kemudian merangkai mereka sesuai kebutuhan. Ini memungkinkan saya untuk menjaga tata letak yang konsisten di semua proyek saya dan memanfaatkan file css yang sama berulang-ulang. Karena mereka tidak spesifik. Berikut ini sebuah contoh: ---- div class = "c12 bg0 m10 p5 white fl" / div --- Ini berarti bahwa wadah adalah 12 kolom, menggunakan bg0 memiliki margin 10px padding dari 5 teks berwarna putih dan mengapung kiri. Saya dapat dengan mudah mengubah ini dengan menghapus atau menambahkan yang baru - Apa yang saya sebut gaya "ringan" - Alih-alih membuat kelas tunggal dengan semua atribut ini; Saya hanya menggabungkan gaya tunggal saat saya kode halaman. Ini memungkinkan saya untuk membuat kombinasi gaya apa pun dan tidak membatasi kreativitas saya atau menyebabkan saya membuat sejumlah besar gaya yang serupa. Lembar gaya Anda menjadi jauh lebih mudah dikelola, diminimalkan dan memungkinkan Anda untuk menggunakannya berulang kali. Metode ini saya temukan fantastis untuk desain cepat. Saya juga tidak lagi mendesain pertama di PSD tetapi di browser yang juga menghemat waktu. Selain itu karena saya juga telah membuat sistem penamaan untuk latar belakang dan atribut desain halaman saya cukup mengubah file gambar saya ketika membuat proyek baru. (Bg0 = latar belakang tubuh sesuai dengan sistem penamaan saya) Itu berarti bahwa jika saya sebelumnya memiliki warna putih background dengan satu proyek cukup mengubahnya menjadi hitam berarti bahwa pada proyek berikutnya bg0 akan menjadi latar belakang hitam atau gambar lain .....