Mengapa kita tidak menggunakan CSS dinamis (sisi server dihasilkan)?

Karena HTML yang dihasilkan sisi server sepele (dan itu adalah satu-satunya cara untuk membuat halaman web dinamis sebelum AJAX), CSS yang dihasilkan sisi server tidak. Sebenarnya, saya belum pernah melihatnya. Ada kompiler CSS, tetapi mereka menghasilkan file CSS yang dapat digunakan sebagai statis.

Secara teknis, ini tidak memerlukan pustaka khusus, tag gaya HTML harus merujuk ke skrip templater PHP (/ ASP / apa pun) alih-alih file statis CSS, dan skrip tersebut harus mengirimkan header tipe konten CSS - itu saja.

Apakah ada masalah cache? Saya kira tidak. Script harus mengirimkan header no-cache dll. Apakah itu masalah bagi para desainer? Tidak, mereka harus mengedit template CSS (karena mereka mengedit template HTML).

Mengapa kami tidak menggunakan generator CSS dinamis? Atau jika ada, tolong beri tahu saya.

Alasan utama mengapa css jarang dihasilkan secara dinamis (ini juga berlaku untuk javascript) adalah karena mereka adalah kandidat yang baik untuk caching. CSS adalah cara yang sangat fleksibel untuk menata halaman Anda, dengan kombinasi kelas yang tepat, Anda bisa mendapatkan semua bagian berbeda dari semua halaman berbeda Anda ditata sesuai dengan semua jenis isyarat semua Tanpa harus mengkondisikan semua itu di CSS sendiri tentang apa yang sebenarnya terjadi untuk hadir pada tampilan halaman ini.

Hanya karena CSS tidak perlu berbeda per halaman mengarah ke praktik yang sangat umum untuk mengoptimalkan biaya pengunduhan. Sebagian besar situs menjejalkan semua css untuk seluruh situs mereka menjadi satu unduhan, sehingga bagian-bagian yang akan berlaku untuk tampilan halaman yang berbeda hadir hanya dalam satu file yang diunduh. Dengan caching, klien Anda tidak perlu menunggu untuk mengunduh untuk kedua kalinya. Mungkin yang lebih penting, Anda, sebagai penyedia konten, tidak perlu membayar biaya mengunggah konten lebih dari sekali; dan Anda bahkan dapat meletakkan css statis di server yang lebih cocok menyajikan konten statis, yang membebaskan sumber daya untuk konten dinamis aktual di server aplikasi Anda.

Praktek ini sangat umum, sehingga banyak browser hanya berasumsi bahwa css itu statis; dan sangat enggan mengunduh CSS yang sudah mereka miliki; bahkan jika pengguna memuat ulang halaman. Perlakuan khusus ini hanya berlaku untuk CSS; jenis konten lainnya dimuat ulang seperti yang diharapkan.

Saya percaya anggapan Anda salah: dalam proyek terakhir saya, aplikasi tersebut menggunakan CSS yang dihasilkan server yang dimuat oleh ajax (karena, tergantung pada lokasi peta yang Anda lihat, halaman tersebut diberi merek dengan gaya yang sama sekali berbeda).

Namun, kasus penggunaan di mana mengambil CSS tambahan oleh ajax akan menyelesaikan masalah sangat jarang, ini mungkin mengapa Anda tidak pernah menjumpai ini: biasanya lebih mudah untuk mempertahankan seperangkat stylesheet yang diproses sebelumnya pada waktu penempatan (KURANG + minifikasi) dan dapat disimpan dalam cache ( misal halaman selanjutnya akan dapat menggunakan kembali stylesheet yang di-cache sebelumnya, sehingga waktu awal lebih pendek).

Sebenarnya, ada kasus penggunaan untuk CSS dinamis. Saya telah bekerja dengan tiga jenis:

1. Kurang - Kurang CSS pada dasarnya adalah ekstensi bahasa CSS yang menambahkan "perilaku dinamis seperti variabel, mixin, operasi, dan fungsi." Ini juga memungkinkan "aturan bersarang", yang sangat nyaman. Saya telah menggunakan Less terutama untuk membuat penulisan CSS kurang bertele-tele dengan menghilangkan beberapa pengulangan.

2. Penulisan ulang URL - Sama seperti bukti pernyataan Anda bahwa tidak ada masalah cache, saya telah menggunakan PHP untuk menyajikan skrip sebagai file CSS dengan header cache yang benar untuk waktu yang lama. Saya terutama melakukannya untuk melayani file CSS dari perpustakaan yang tidak ada di dalam root web.

3. Laporan dinamis - Pada satu proyek yang saya kerjakan, kami memiliki pembuat laporan untuk semua jenis data dalam sistem. Kami menampilkan (di dalam styletag, seperti yang Anda sebutkan) aturan gaya dinamis terutama untuk warna yang telah dipilih oleh pengguna dalam pembuat laporan.

^{Catatan: Saat mengeluarkan CSS langsung ke URL (seperti pada 1 atau 2 ) dan tidak menyematkannya dalam halaman yang sudah dibuat oleh skrip, Anda akan menambahkan beban yang cukup signifikan ke server selama menyajikan konten statis. Jadi, jika Anda memiliki lalu lintas yang cukup besar, meskipun Anda dapat melakukannya secara dinamis setiap saat, Anda ingin menyimpannya sebagai file statis jika use case memungkinkan.}

Tetapi mengapa itu tidak lebih umum? Saya pikir ada satu alasan utama - CSS tidak benar-benar dibangun untuk menghasilkan konten. Jadi tidak ada kebutuhan besar. Melampaui menghasilkan warna dinamis yang dipilih oleh pengguna, seperti yang kami lakukan, atau mungkin gambar latar belakang (meskipun jika gambar tersebut puas , maka mungkin argumen yang baik untuk menggunakan imgtag), apa lagi yang perlu Anda lakukan secara dinamis?

Sebagian besar perubahan gaya dinamis dapat dihasilkan dengan merujuk pada perbedaan dokumen CSS statis yang .

Jadi memang mungkin, seperti yang Anda pikirkan, tetapi tidak ada terlalu banyak alasan untuk melakukannya.

Ada DUA aspek terpisah untuk memuat CSS secara dinamis ...

1. Menghasilkan file CSS secara dinamis di server

   Ini cukup mudah, dan banyak situs web melakukannya. Ini berguna jika Anda mengubah CSS Anda berdasarkan kondisi tertentu. Misalnya, jika Anda memilih tema situs berdasarkan lokasi Geo pengguna.

2. Memuat file CSS sesuai permintaan melalui pemuat skrip JS

   Ini bisa berguna jika Anda membuat sebagian besar DOM secara dinamis dan kemudian memuat gaya yang diperlukan. TAPI Seperti kata penulis LABjs ...

   sebenarnya menentukan apakah file CSS yang dimuat secara dinamis telah selesai memuat sebenarnya cukup rumit dan menantang untuk dilakukan lintas-browser. Acara "memuat" tidak menyala seperti yang diharapkan / diharapkan orang. jadi menambahkan dukungan seperti itu akan menambah ukuran non-sepele untuk LABjs

1. Kami melakukan ini. Sepanjang waktu. Terutama untuk hal-hal seperti branding khusus pelanggan dalam aplikasi SaaS, di mana warna dll berasal dari basis data.
2. Ini jauh lebih cepat (dari sudut pandang pengguna) untuk pra-menghasilkan CSS sebelum atau selama penyebaran, atau selama boot aplikasi jika aplikasi memiliki fase boot. Kami biasanya lebih suka untuk membuat file CSS statis sebelum memungkinkan.
3. Untuk kecepatan maksimum (dari sudut pandang pengguna), yang terbaik adalah mengirimkan file CSS statis ke CDN dan meminta browser mengambilnya dari CDN, daripada dari server aplikasi Anda. Ini umumnya hanya mungkin ketika file CSS dapat dibuat sebelum atau selama penyebaran, dan di mana bagian dari penyebaran mengirimkan file CSS statis yang dibuat sebelumnya ke CDN. CDN sekarang sangat murah dan mudah digunakan - lihat CloudFront Amazon dan Rackspace's Cloud Files.

Apakah ada masalah cache? Saya kira tidak. Script harus mengirimkan no-cache dll

Semuanya sangat baik, tetapi itu adalah informasi penting yang umumnya statis yang Anda minta pengguna unduh setiap kali mereka memuat halaman. Jadi sebaiknya Anda punya alasan yang bagus untuk itu.

Sekarang apa yang mungkin menjadi alasan itu?

Jika Anda ingin mengubah gaya berdasarkan berbagai parameter maka Anda melakukannya dengan memiliki beberapa lembar gaya dan menghasilkan HTML untuk mengunduh yang benar.

Dynamic CSS cukup sepele, dan meskipun aplikasinya lebih terbatas (melihat bagaimana HTML yang dihasilkan secara dinamis dengan stylesheet statis memecahkan sebagian besar kebutuhan sehari-hari, dan CSS sendiri menggabungkan beberapa mekanisme untuk mencapai semi-dinamis), saya Saya sudah melihatnya digunakan pada banyak kesempatan, dan saya menggunakannya sendiri kapan pun saya mau.

Seringkali, bagian 'dinamis' tidak lebih dari menggabungkan beberapa stylesheet menjadi satu (untuk mengurangi jumlah permintaan HTTP) dan memperkecil mereka (untuk mengurangi penggunaan bandwidth), tetapi hal-hal sederhana seperti penggantian variabel (misalnya, menggunakan variabel untuk warna yang digunakan di seluruh lembar gaya) dapat membuat hidup Anda lebih mudah. Namun, karena CSS memiliki sintaks yang cukup mudah dengan beberapa peringatan, sistem pemrosesan teks untuk tujuan umum atau bahasa scripting seperti PHP biasanya cukup untuk ini, itulah sebabnya Anda tidak melihat banyak sistem pemrosesan CSS yang tidak tersedia.

Mungkin Anda pernah melihatnya di alam liar, tanpa mengenalinya. Server yang mengirim skrip dinamis biasanya menggunakan penulisan ulang URL sehingga URL menjadi tidak dapat dibedakan dari konten yang disajikan secara statis. Ini diperlukan karena beberapa peramban (terutama IE) mengandalkan ekstensi untuk deteksi tipe MIME yang benar dalam keadaan tertentu, mengabaikan (atau membuang) header Jenis Konten yang mungkin telah Anda kirim.

Mengenai caching: Stylesheet ditarik dengan permintaan GET, dan membuatnya cacheable sangat penting untuk pengalaman pengguna yang layak. Anda tidak ingin menonton reflow halaman saat mengunduh ulang stylesheet pada setiap permintaan. Sebagai gantinya, Anda harus meletakkan semua parameter yang mengubah output pemrosesan stylesheet Anda ke string kueri; string kueri yang berbeda menghasilkan URL yang berbeda, yang pada gilirannya menyebabkan kehilangan cache, sehingga setiap kali parameter diubah, stylesheet akan diunduh ulang, bahkan jika klien menyimpan semuanya. Jika Anda benar-benar membutuhkan CSS yang berpotensi berbeda untuk setiap permintaan dan tergantung pada efek samping, pertimbangkan untuk menempatkan bagian non-dinamis ke dalam lembar gaya yang dilayani secara statis, dan hanya melayani hal-hal secara dinamis yang benar-benar diperlukan untuk menjadi dinamis.

Ada beberapa skenario yang saya ingin menggunakan CSS dinamis, tetapi lebih sering daripada saya terjebak dengan menggunakan desainer yang membutuhkan sedikit bantuan memahami dasar-dasar CSS. Melemparkan bahasa yang dinamis dalam campuran mungkin sebenarnya membuat kepala meledak.

Cara lain untuk melihat ini adalah "beberapa pria lain melakukan semua pekerjaan manual yang menyakitkan, bukan masalah saya, melanjutkan ..."