Bagaimana cara mengatasi masalah CSS yang tidak digunakan

Saya menjalankan beberapa tes cepat di blog, dan saya selalu mendapat keluhan tentang CSS yang tidak digunakan. Tapi ini bukan CSS yang tidak pernah saya gunakan, hanya saja tidak digunakan pada halaman tersebut.

Sekarang saya bekerja dengan cara terstruktur, tetapi masih harus ada beberapa CSS di file yang tidak akan digunakan, karena Anda membutuhkannya di halaman lain.

Saya tidak berpikir bahwa menggunakan file CSS yang berbeda pada halaman yang berbeda adalah cara untuk pergi, saya pikir Anda jauh lebih baik hanya membuat satu file besar yang bisa di-cache.

Sekarang apakah ada cara yang elegan untuk menangani ini, atau apakah Anda hanya bertahan dengan itu.

Pernyataan Anda bahwa Anda lebih baik dengan satu, file CSS yang lebih besar benar. Kemungkinan akan hanya beberapa KB saat di-zip, dan harus di-cache, jadi bukan overhead yang besar. Ada beberapa hal yang perlu diperiksa.

Jika beberapa CSS hanya pernah digunakan pada satu halaman, mungkin lebih baik jika menempatkan CSS pada halaman, dalam beberapa tag gaya. (Catatan: ini dapat membuat hal-hal sulit dipertahankan, terutama ketika Anda kemudian memutuskan untuk menggunakan gaya yang sama di tempat lain.)

Jika Anda mengambil halaman paling populer (misalnya, halaman yang merupakan 50% + dari tampilan halaman Anda) dan menemukan bahwa hanya sebagian kecil dari CSS Anda yang digunakan pada halaman tersebut, mungkin lebih cepat bagi pengguna untuk membaginya menjadi dua file CSS. Sekarang, pengguna baru yang mengunjungi halaman terpopuler Anda memiliki lebih sedikit untuk diunduh. Di halaman lain ada satu permintaan HTTP tambahan tapi itu bukan masalah besar.

Pastikan CSS Anda dioptimalkan dengan baik. Hindari penyeleksi keturunan jika memungkinkan. Jika sisi kanan pemilih terlalu umum maka dapat memperlambat waktu render. Misalnya .class div {}akan sedikit lambat karena browser harus memeriksa setiap <div>elemen pada halaman, lalu mencari pohon DOM ke bagian paling atas untuk menemukan (atau tidak) elemen dengan kelas.

Saya pikir ini adalah kelemahan dari alat speedtest yang Anda gunakan, bahwa itu tidak melihat seluruh situs dan melihat CSS mana yang tidak pernah digunakan sama sekali. Jika Anda dapat menemukan alat yang berfungsi, beri tahu kami!

Saya pikir Anda jauh lebih baik hanya dengan membuat satu file besar yang bisa di-cache.

Ya, itu masuk akal, kecuali ada satu set halaman yang membutuhkan sedikit tambahan CSS dalam hal ini Anda dapat memasukkannya pada mereka.

Ada plug-in Firefox kecil yang berguna yang disebut Dust-Me Selectors , yang memeriksa melalui CSS Anda dan melaporkan aturan yang tidak digunakan. Namun, itu tidak bekerja dengan versi terbaru dari Firefox (v8.0), yang agak memalukan.

PS: Kalau saya jadi Anda, saya akan mengambil CSS Lint dengan sejumput garam - ada aliran pemikiran yang mengatakan bahwa "rekomendasinya" sangat bagus, dan benar-benar berlebihan. (Untuk lebih jelasnya, lihat artikel persuasif Matt Wilcox, " CSS Lint berbahaya " ). Paling-paling, ini benar-benar tidak resmi ... dan, mari kita hadapi itu, apakah kita benar - benar membutuhkan alat lain / pseudo-standar untuk memuaskan?

Cara paling optimal dan terukur yang bisa saya bayangkan untuk menangani ini terdiri dari:

1. Membuat file CSS utama untuk segala sesuatu yang berhubungan dengan "ruang lingkup global" (seperti desain situs, kelas global, perpustakaan, plugin, dll ...).

2. Membuat sistem yang melibatkan folder yang berisi satu file CSS unik per halaman (hanya jika diperlukan). File-file ini dapat memiliki nama file yang sama dengan halaman yang ditautkan sehingga Anda dapat menjalankan skrip sisi server pada setiap halaman yang mencari file CSS di folder itu dan menambahkannya halaman jika ada.

3. Mungkin, membuat file CSS berbeda untuk hal-hal spesifik peramban yang Anda muat hanya ketika pengunjung memiliki peramban relatif.

Dengan melakukan itu, Anda akan berakhir dengan cara yang solid dan dioptimalkan untuk memisahkan CSS Anda. Yap masih akan ada aturan yang tidak digunakan dalam file utama tetapi mereka akan berada di tempat yang seharusnya dalam sudut pandang logis.

Juga perlu diingat bahwa 3 "lapisan" file CSS itu akan di-cache seperti halnya file CSS tunggal.