Refactoring file CSS besar / lama


13

Saat ini saya sedang mengerjakan situs web 100.000 halaman, desain saat ini telah ada selama lebih dari 5 tahun dan pembaruan berturut-turut telah menghasilkan empat file CSS 12.000+ baris.

Jelas CSS telah menjadi berat, banyak gaya digandakan dan hampir tidak mungkin untuk mengetahui berapa banyak gaya yang sebenarnya digunakan.

Kita dapat meminimalkan, tetapi ini tidak benar-benar mengatasi masalah, hanya menunda kerja ulang yang tak terhindarkan.

Jadi tiga pertanyaan apakah ada alat di luar sana untuk ...

  • menghapus duplikat file CSS besar?
  • memindai situs dan mencatat kelas CSS dan penggunaan ID?
  • dapatkah pemindaian semacam itu dapat dicapai dengan semacam naskah, mungkin greasemonkey?

Jawaban:


17

http://unused-css.com/ Melakukan sebagian dari apa yang Anda minta, dan mereka mengatakan ini: -

Latish Sehgal telah menulis aplikasi windows untuk menemukan dan menghapus kelas CSS yang tidak digunakan. Saya belum mengujinya tetapi dari uraiannya, Anda harus memberikan path file html Anda dan satu file CSS. Program kemudian akan mendaftar pemilih CSS yang tidak digunakan. Dari tangkapan layar, sepertinya tidak ada cara untuk mengekspor daftar ini atau mengunduh file CSS bersih yang baru. Sepertinya layanan ini terbatas pada satu file CSS. Jika Anda memiliki banyak file yang ingin Anda bersihkan, Anda harus membersihkannya satu per satu.

Dust-Me Selectors adalah ekstensi Firefox (untuk v1.5 atau lebih baru) yang menemukan pemilih CSS yang tidak digunakan. Itu mengekstrak semua pemilih dari semua lembar gaya pada halaman yang Anda lihat, kemudian menganalisis halaman itu untuk melihat mana dari pemilih tersebut yang tidak digunakan. Data kemudian disimpan sehingga saat menguji halaman berikutnya, penyeleksi dapat dicoret dari daftar saat mereka ditemui. Alat ini seharusnya bisa laba-laba seluruh situs web tetapi saya sayangnya bisa membuatnya berfungsi. Juga, saya tidak percaya Anda dapat mengkonfigurasi dan mengunduh file CSS dengan gaya dihapus.

Liquidcity CSS cleaner adalah skrip php yang menggunakan ekspresi reguler untuk memeriksa gaya satu halaman. Ini akan memberi tahu Anda kelas-kelas yang tidak tersedia dalam kode HTML. Saya belum menguji solusi ini.

Deadweight adalah alat cakupan CSS. Diberi satu set stylesheet dan satu set URL, itu menentukan penyeleksi mana yang benar-benar digunakan dan daftar mana yang bisa "aman" dihapus. Alat ini adalah modul ruby ​​dan hanya akan bekerja dengan situs web rails. Selektor yang tidak digunakan harus dihapus secara manual dari file CSS.

Helium CSS adalah alat javascript untuk menemukan CSS yang tidak digunakan di banyak halaman di situs web. Pertama-tama Anda harus menginstal file javascript ke halaman yang ingin Anda uji. Kemudian, Anda harus memanggil fungsi helium untuk memulai pembersihan.

UnusedCSS.com adalah aplikasi web dengan antarmuka yang mudah digunakan. Ketik url situs dan Anda akan mendapatkan daftar pemilih CSS. Untuk setiap pemilih, angka menunjukkan berapa kali pemilih digunakan. Layanan ini memiliki beberapa batasan. Pernyataan impor tidak didukung. Anda tidak dapat mengonfigurasi dan mengunduh file CSS bersih yang baru.

CSSESS adalah bookmarklet yang membantu Anda menemukan pemilih CSS yang tidak digunakan di situs mana pun. Alat ini cukup mudah digunakan tetapi tidak memungkinkan Anda mengonfigurasi dan mengunduh file CSS yang bersih. Ini hanya akan mencantumkan file CSS yang tidak digunakan.

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.