Cara mengidentifikasi definisi css yang tidak digunakan

414

Apakah ada pendekatan yang baik untuk membantu mengidentifikasi definisi css yang tidak digunakan dalam suatu proyek? Banyak file css ditarik dan sekarang saya mencoba untuk membersihkannya.

jswanson
sumber
Ketika Anda mengatakan "dalam sebuah proyek" - apa sebenarnya yang Anda maksud? Tergantung pada lingkungan apa yang Anda gunakan jawabannya bisa berbeda.
Ian Robinson
Saya membuat alat yang melakukan pekerjaan yang cukup bagus. Inilah Pen Code
toddmo
Saya menulis sebuah skrip yang dapat melakukannya untuk Anda: github.com/kgoedecke/unused-css-parser
Kevin Goedecke

Jawaban:

145

Lihatlah ekstensi Firefox Dust-Me di https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .

David Medinets
sumber
14
Ekstensi tidak berfungsi di Firefox 4
mvark
5
Pembaruan ini tidak pernah muncul dan setelah bertanya di forum SitePoint akan muncul bahwa plugin sudah mati.
Mike B
3
Sepertinya penulis telah memposting versi yang diperbarui ke situs webnya sendiri baru-baru ini, bahkan versi untuk Opera. Lihat brothercake.com
Funka
2
Sayangnya tidak lagi berfungsi
Jonathan
4
Saya menulis pengganti, merangkak beberapa halaman di situs web Anda (mengikuti tautan secara rekursif): jitbit.com/unusedcss
Alex
259

Alat Pengembang Chrome memiliki tab Audit yang dapat menampilkan pemilih CSS yang tidak digunakan.

Jalankan audit, kemudian, di bawah Kinerja Halaman Web lihat Hapus aturan CSS yang tidak digunakan

masukkan deskripsi gambar di sini

Derek Adair
sumber
64
itu luar biasa, tetapi terlalu buruk Anda tidak dapat menjalankannya pada sekelompok halaman (jika tidak, aturan CSS yang tidak terpakai mungkin tidak dapat dihindari)
Damon
17
Saya menjalankan alat audit dan ini menunjukkan kepada saya css yang tidak digunakan, tetapi bagaimana cara menggunakannya? Apakah saya harus mencari setiap item secara manual dan menghapusnya?
Timothée HENRY
19
Ini hanya halaman saat ini. Dikatakan '2445 aturan (83%) dari CSS tidak digunakan oleh halaman saat ini', jadi tidak terlalu membantu.
chhantyal
8
Saat Anda memperluas item, Anda mendapatkan daftar aturan aktual yang tidak digunakan. Meskipun, itu tidak membantu di situs di mana Anda mengubah DOM saat bepergian.
Howie
10
Sebenarnya ini baru saja dipindahkan ke cakupan - pergi ke audit -> di sebelah Konsol di bagian bawah ada menu (3 menu jenis titik vertikal) dan Anda dapat memilih cakupan di sana. Cukup klik rekam dan navigasikan.
Graham Ritchie
65

Saya baru saja menemukan situs ini - http://unused-css.com/

Terlihat bagus tapi saya perlu memeriksa css 'bersih' yang dikeluarkan sebelum mengunggahnya ke situs saya.

Juga karena dengan semua alat ini saya perlu memeriksa tidak menghapus id dan kelas tanpa gaya tetapi digunakan sebagai penyeleksi JavaScript.

Konten di bawah ini diambil dari http://unused-css.com/ sehingga kredit kepada mereka untuk merekomendasikan solusi lain:

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.

Topstyle adalah aplikasi windows termasuk banyak alat untuk mengedit CSS. Saya belum banyak mengujinya tetapi tampaknya memiliki kemampuan untuk menghapus pemilih CSS yang tidak digunakan. Perangkat lunak ini berharga 80 USD.

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

megaSteve4
sumber
5
hanya sebuah catatan yang tidak terpakai-css.com jangan biarkan Anda mengunduh CSS tanpa Anda menjadi anggota berbayar dan paket terendah dimulai dari $ 29 sebulan! tampaknya agak mahal untuk layanan kepada saya
georgiecasey
1
Saya akan menambahkan purifycss github.com/purifycss/purifycss ke dalam campuran. Ini gratis, cukup populer (menurut bintang di github) dan bekerja dengan aplikasi satu halaman.
Dmitry Gonchar
21

Google Page Speed dapat melakukannya untuk Anda (sebenarnya jauh lebih banyak daripada sekadar memberi tahu Anda CSS mana yang tidak digunakan). Di FireFox, ini tersedia sebagai add-on FireBug. Lalu ada versi online juga.

Salman A
sumber
8

CSS Minifier yang Lebih Baik dalam C # membuang gaya yang berlebihan;

Anda juga ingin menggunakan Dust-Me dengan ini.

Ingat, jika ada konten yang saat ini tidak terlihat oleh saya-debu, Anda mungkin membuang gaya yang Anda butuhkan.

EDIT: tautan rusak tetapi archive.org memiliki halaman dan kode.

mjc
sumber
7

Penggunaan CSS

Ekstensi Firebug untuk melihat aturan CSS mana yang sebenarnya digunakan.

Penggunaan CSS adalah ekstensi untuk Firebug (dengan demikian diperlukan untuk menginstal Firebug) yang memungkinkan Anda mengetahui aturan gaya CSS yang tidak digunakan. Ini mengidentifikasi CSS yang Anda gunakan dan tidak gunakan. Ini memungkinkan Anda menunjukkan bagian-bagian yang tidak perlu yang bisa dilepas. Anda harus menggunakan add-on ini untuk menjaga file CSS Anda seringan mungkin.

Somnath Muluk
sumber
6

Sepertinya seseorang memperbarui DustMe Selectors untuk bekerja dengan Firefox lagi dengan nama baru - 'CSS Roundup' http://blog.brothersmorrison.com/?p=198

Josh
sumber
Penulis memiliki versi baru yang diposting hanya beberapa minggu yang lalu di situs webnya, di www.brothercake.com
Funka
plugin ini tidak tersedia lagi dan tautan untuk mengunduh ada di brothercake sudah mati
Andrea Mauro
3

Gunakan Bilah Alat Pengembang Internet Explorer , s Lihat> Pencocokan Pemilih CSS : Melihat laporan dari semua aturan gaya yang ditetapkan dan berapa kali mereka digunakan pada halaman saat ini.

Jitendra Vyas
sumber