Saya punya file CSS besar dan file HTML. Saya ingin mengetahui aturan mana yang tidak digunakan saat menampilkan file HTML. Apakah ada alat untuk ini?
File CSS telah berevolusi selama beberapa tahun dan dari apa yang saya tahu tidak ada yang pernah menghapus apa pun darinya - orang hanya menulis aturan baru yang berulang-ulang.
EDIT: Disarankan untuk menggunakan Dust-Me Selectors atau alat Kinerja Halaman Web Chrome. Tetapi keduanya bekerja pada level penyeleksi, dan bukan aturan individual. Saya punya banyak kasus di mana aturan di dalam pemilih selalu ditimpa - dan inilah yang paling ingin saya singkirkan. Sebagai contoh:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }Semua teks dalam HTML saya ada di dalam beberapa elemen pembungkus, jadi tidak pernah putih. bodyPadding selalu berfungsi, jadi tentu saja seluruh bodypemilih tidak dapat dilepas. Dan saya juga ingin menyingkirkan peraturan yang tidak berguna itu.
EDIT: Dan kasus lain dari aturan tidak berguna: ketika itu menduplikasi yang sudah ada tanpa mengubah apa pun:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }Saya akan dengan senang hati menyingkirkan yang kedua margin-left... sekali lagi bagi saya alat itu tidak menemukan hal-hal seperti itu.
EDIT: Saya menghargai semua jawaban, tetapi sayangnya alat yang Anda sarankan tidak membuat saran yang berguna. Saya memutakhirkan jawaban Anda, tetapi saya akan menunggu alat yang melakukan hal-hal yang lebih terperinci, seperti yang ditentukan di atas.
Terima kasih,
sumber
Jawaban:
Seleksi Dust Me Selecters Firefox
Di Alat Pengembang Chrome, Anda dapat menggunakan alat Kinerja Halaman Web untuk menemukan aturan CSS yang tidak digunakan.
sumber
.abcmemiliki margin yang berbeda,<a class="abc">saya pikir akan mengubah marginnya pada hover. Nah, itu mungkin bukan apa yang Anda inginkan, tetapi tentu saja bisa, dan Anda tidak bisa menghapus aturan duplikat itu secara membabi buta.a.abc, atau tidak ada <a class="abc"/> di mana pun di HTML, itu tidak ada. Lagi pula, saya sudah menyelesaikan tugas yang mendorong saya untuk menanyakan pertanyaan ini di sini, dan saya mengakhiri dengan menerapkan banyak heuristik. Saya mencoba Alat Pengembang Chrome, tetapi mereka tidak banyak membantu saya.Anda juga dapat melihat di Unused-CSS.com Alat ini akan menjelajahi halaman Anda dan membangun file CSS yang dioptimalkan tanpa penyeleksi yang tidak digunakan
sumber
Saya selalu menyukai Penggunaan CSS . Ini adalah plugin untuk Firebug dan mari Anda memindai halaman dan melihat aturan CSS mana yang tidak diterapkan. Ia bahkan akan secara otomatis memindai dan bekerja di beberapa halaman.
sumber
Periksa uncss, ini modul simpul.
"UnCSS adalah alat yang menghapus CSS yang tidak terpakai dari stylesheet Anda. Ia bekerja di banyak file dan mendukung CSS yang disuntikkan Javascript."
https://www.npmjs.com/package/uncss
Edit setelah komentar:
Saya pikir Anda meminta dua hal berbeda:
Hapus aturan yang tidak digunakan secara otomatis, inilah yang dapat dilakukan uncss untuk Anda. Saya juga membuat alat ini, byebye CSS, tetapi tidak otomatis seperti yang Anda tanyakan: https://www.npmjs.com/package/css-byebye
Optimalkan stylesheet di mana aturan dapat digabung / disederhanakan.
Dalam hal ini saya akan merekomendasikan dua alat yang melakukan hal-hal semacam ini:
Mereka melakukan kurang lebih optimisasi yang sama, kadang-kadang satu memiliki hasil yang lebih baik daripada yang lain, dan kadang-kadang sebaliknya. Itu tergantung pada stylesheet Anda. (Anda dapat menjalankan satu demi satu juga: P)
Saya menggunakannya sebagai bagian dari proses membangun dengan gerutuan. Jadi sebenarnya bukan hal visual seperti yang Anda tanyakan tetapi mereka melakukan jenis optimisasi yang Anda inginkan.
Inilah yang mereka katakan untuk CSSO (info lengkap di sini: https://en.bem.info/tools/optimizers/csso/ )
Optimalisasi struktural:
sumber
@ John: alat yang luar biasa, terima kasih untuk tautannya
@liori: Saya juga sangat merekomendasikan plugin Firefox Web Developer yang memungkinkan Anda menampilkan nama elemen / properti, mengedit css secara real time (tidak menulis ke file css Anda) sehingga Anda dapat mengedit dan menguji perubahan css tanpa faff karena harus menyimpan dan mengunggah css Anda setiap 3 detik. + memuat lebih banyak fitur.
Ada juga inspektur DOM yang sangat bagus yang dihubungkan ke Firebug yang juga terhubung dan sangat bagus untuk memilah Javascript.
sumber
Sebenarnya John, browser Edisi Pengembang Firefox yang baru lebih baik daripada menggunakan Firebug atau utilitas Firefox. Cobalah dan Anda tidak akan kecewa. Saya yakin!
https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015
sumber