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

258

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?

Nate
sumber
1
Ini adalah pertanyaan yang BENAR-BENAR tua, tetapi menghadapi masalah yang sama saya menemukan satu yang saya pikir itu solusi terbaik , kalau-kalau ada orang lain ke halaman ini. Banyak file yang dikompresi dengan PHP dan dikirim melalui satu permintaan.
Francisco Presencia
3
@ FrankPresenciaFandos melakukan ini ok'ish untuk situs lalu lintas rendah, tetapi menjalankan skrip ini berulang-ulang di situs lalu lintas tinggi tampaknya sedikit tidak aktif. Jika Anda menggunakan skrip build, Anda dapat memiliki yang terbaik dari kedua dunia dan masih mempertahankan server web yang performan karena tidak menjalankan skrip php (pernah).
Chase Florell
2
Ini akan dijalankan hanya setiap kali css diubah, dan kemudian Anda harus memasukkan file css yang dihasilkan.
Francisco Presencia

Jawaban:

85

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/

Marc Edwards
sumber
2
Mengubah jawaban saya yang diterima di sini, karena ini benar-benar cara untuk pergi hari ini. Ketika saya awalnya bertanya saya tidak merasa seperti Sass atau KURANG benar-benar lepas landas.
Nate
144

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.

Chase Florell
sumber
Selain lebih sedikit permintaan HTTP, apakah ada keuntungan untuk file monolitik tunggal? Css saya mungkin berubah seiring waktu, tetapi jumlah pengguna akan sangat kecil, sebagian besar diakses melalui koneksi kecepatan tinggi. Jadi saya pikir keuntungan dari banyak file akan jauh lebih besar daripada permintaan http lebih sedikit ...
Nate
1
lebih sedikit permintaan HTTP ADALAH alasannya. mempertahankan pengunjung adalah prioritas # 1, jadi jika halaman Anda memuat lambat, mereka cenderung tidak tinggal. Jika Anda memiliki kemampuan untuk menggabungkan (saya melihat Anda menggunakan asp.net) maka saya sangat merekomendasikan melakukannya. Itu yang terbaik dari kedua dunia.
Chase Florell
3
"Jadi saya pikir keuntungan dari banyak file akan jauh lebih besar daripada permintaan http lebih sedikit ..." Tidak, tidak, tidak ... justru sebaliknya. Dengan koneksi berkecepatan tinggi, waktu yang dibutuhkan untuk menangani permintaan HTTP adalah hambatan. Sebagian besar browser secara default hanya mengunduh dua file sekaligus, sehingga browser akan melakukan 2 permintaan, tunggu, unduh file css dengan cepat, kirim 2 permintaan lagi, tunggu, unduh file dengan cepat. Berbeda dengan satu permintaan HTTP untuk satu file css yang diunduh dengan cepat. Komunikasi dengan server akan menjadi bagian yang lambat.
Isley Aardvark
1
Anda dapat membuat dan menguji fitur dengan style sheet terpisah dan menggabungkannya menjadi satu mongo satu waktu membangun. Dengan begitu Anda tidak memelihara satu file mongo tetapi banyak file kecil. Kami melakukan ini serta mengompresi semua spasi putih dan komentar yang memudahkan manusia untuk membaca tetapi tidak berarti bagi halaman web Anda.
Tanpa Pengembalian Uang Tanpa Pengembalian
2
Seharusnya jawaban ini diperbarui sekarang karena http2 mengurangi keuntungan dari lebih sedikit permintaan.
DD.
33

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.

Randy Simon
sumber
@Randy Simon - tetapi bagaimana jika kita mengedit css langsung di ftp selalu.
Jitendra Vyas
15
Saya tidak tahu pengaturan Anda, tetapi itu sepertinya bukan ide yang baik bagi saya. Anda harus menguji perubahan sebelum mendorongnya.
Randy Simon
1
@RandySimon tautan YUI Compressor rusak.
direformasi
16

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.

Will Hartung
sumber
7
Namun, kompresi / minifikasi runtime memiliki overhead sistem. Anda harus mempertimbangkan pro dan kontra. Jika Anda memiliki situs lalu lintas tinggi, ini bukan solusi optimal.
Chase Florell
5
@ ChaseFlorell - Anda hanya melakukan kompresi / minifikasi sekali dan cache
Siler
@Siler, Saya Tahu, itu sebabnya saya memposting jawaban saya. stackoverflow.com/a/2336332/124069
Chase Florell
14

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)

Pascal MARTIN
sumber
14

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.
DD.
sumber
1
Ini harus menjadi jawaban modern yang diterima kinerja RE. Beberapa balasan lain kedaluwarsa.
SparrwHawk
Jika Anda sedang membangun SPA (aplikasi satu halaman) maka saya berpendapat desain terbaik adalah untuk membangun semua css dan js Anda menjadi dua file lengkap. "app.js" dan "vendor.js" Semua html, dan gaya dikompilasi ke JS inline di vendor.js Itu berarti "bootstrap.css dan bootstrap.js" semuanya dalam vendor.js dan diminimalkan dengan sourcemaps menjadi " vendor.min.js ". Hal yang sama dengan aplikasi, kecuali sekarang Anda menggunakan html ke js inline transpiler sehingga bahkan aplikasi Anda html ada di file js. Anda dapat meng-host-nya di CDN dan browser akan menyimpannya. Anda bahkan dapat mengkompilasi gambar ke gaya dan ke JS.
Ryan Mann
12

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 .

TheClair
sumber
7

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.

Claud
sumber
Iya. Ini pertanyaan saya kemari. Semua orang fokus pada pengembangan vs produksi. Tentu saja lingkungan pengembangan Anda dapat berbeda dari situs langsung Anda, tetapi mana yang lebih baik untuk situs langsung? Sepertinya tidak ada yang benar-benar mengatasi hal ini. Apakah Anda tahu sumber daya untuk menemukan di mana titik kritis berada?
Dominic P
5

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.

Nicholas Cloud
sumber
Inilah yang saya lakukan, dan sudah bekerja dengan baik untuk saya. Paling-paling Anda mendapatkan 3 file css untuk setiap halaman, yang cukup masuk akal
Ricardo Nunes
4

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

Robusto
sumber
masalahnya adalah ini cukup egois pada sudut pandang pengembang. Setelah selesai, Anda jarang harus kembali, tetapi pengunjung Anda semua harus menunggu halaman untuk memuat file css yang tidak perlu. (Hal yang sama berlaku untuk Javascript menurut saya)
Chase Florell
3
@rockin: Dalam memeriksa salah satu situs file 5-CSS saya setelah membersihkan cache, saya menemukan bahwa total waktu yang diperlukan untuk memuat semua CSS kurang dari sepersepuluh detik. Jika orang tidak bisa menunggu selama itu, saya pikir mereka membutuhkan lebih banyak Ritalin atau sesuatu. Masalah yang jauh lebih besar adalah panggilan balik ke situs iklan seperti klik dua kali, dll., Yang dapat mengakibatkan keterlambatan BESAR, seperti yang disaksikan di situs ini dalam seminggu terakhir.
Robusto
Alat hebat yang digunakan untuk menguji kecepatan situs adalah Firebug bersamaan dengan YSlow. Ini akan memberi Anda representasi akurat dari kecepatan situs Anda.
Chase Florell
4

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

stikkos
sumber
3

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.

Ismael Miguel
sumber
2

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.

augurone
sumber
1

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.


sumber
Jadi, jika saya menggunakan ASP.NET, generik .ASHX handler akan menjadi rute ideal untuk pergi, yang menggabungkan mereka ke dalam satu file untuk mendapatkan yang terbaik dari kedua dunia?
Nate
Ya, saya akan menggunakan IHttpHandler untuk menggabungkan CSS Anda saat runtime (lihat # 2 dalam jawaban saya di atas)
Chase Florell
@Nate: Ketika saya bekerja di ASP.Net kami menggunakan file template untuk mencapai hal yang sama.
Robusto
@ Ragusto, dapatkah Anda menjelaskan apa itu file templat? Saya pikir saya tidak pernah mendengarnya. Saya telah menggunakan App_Themes, tetapi itu masih tidak menggabungkan CSS.
Chase Florell
1
sama seperti pembaruan. Menggunakan IHttpHandler atau file PHP untuk menggabungkan css di sisi server dapat menghemat bandwidth dan mempercepat permintaan, tetapi juga menambah beban yang tidak dibutuhkan di server. Cara terbaik untuk melakukannya adalah dengan menggabungkan / memperkecil css / js Anda selama pembuatan / publikasi situs Anda. Dengan cara ini Anda memiliki satu file statis yang tidak mengambil pemrosesan server apa pun. Terbaik dari SEMUA dunia, kecuali NONE.
Chase Florell
1

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

Ikan lele
sumber
4
Itu tidak membuatnya lebih mudah untuk dipertahankan, karena saya masih perlu menggulir bermil-mil css yang tidak berhubungan untuk mendapatkan apa yang saya cari ...
Nate
2
@Nate: Sudahkah Anda mempertimbangkan untuk beralih ke editor teks dengan fungsi pencarian yang layak? Preferensi pribadi saya adalah file css tunggal dan saya tidak pernah menggulirnya. Saya cukup mengetik "/ classname" (Saya menggunakan turunan vi) dan bam - Saya di kelas itu.
Dave Sherohman
3
Ini juga lebih sulit untuk dipertahankan dalam lingkungan multi-pengembang. Apa itu "header" dalam contoh di atas? Bagaimana jika orang lain tidak berpikir secara geografis, tetapi dalam hal elemen desain dasar, seperti tombol atau menu, sementara yang lain berpikir berbeda? Di mana menu pergi jika ada di header? Bagaimana kalau tidak? Saya pikir lebih mudah untuk menegakkan disiplin semacam itu di file terpisah. Mengapa pengembang aplikasi tidak hanya membuat satu kelas aplikasi besar dengan semua fasilitas alih-alih kerangka kerja dengan hierarki kelas? Tampak mirip dengan saya.
Robusto
Bagaimana jika Anda tidak ingat nama kelas yang Anda cari? Atau bagaimana Anda memutuskan di mana menambahkan kelas baru?
Nate
Jika itu hanya beberapa halaman situs web, itu benar-benar bukan masalah besar. Hanya menyarankan cara lain untuk melakukan sesuatu.
Lele
1

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.

jlfenaux
sumber
0

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">
Steve Tomlin
sumber
-1

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

Raquel
sumber
12
Apakah Anda tahu untuk apa paragraf?
Em1
Ini adalah "Kerangka UI" seperti Bootstrap atau yang lain, begitu Anda tahu leksikon yang baik untuk Anda gunakan, semuanya tentang kurva belajar dan penerimaan istilah yang digunakan. Meski begitu saya bisa memikirkan beberapa contoh yang sangat spesifik di mana contoh Anda akan berjuang untuk memenuhi persyaratan desainer.
Augurone