Vs ekstensi kode css yang tidak digunakan

Inilah yang saya ingin Anda ketahui sebelumnya. ini adalah masalah yang sulit. Jika Anda mendarat di sini karena Anda berharap diarahkan ke alat yang dapat Anda jalankan yang memberi tahu Anda dengan tepat CSS apa yang dapat Anda hapus dari proyek Anda, yah… ada alat di luar sana, tetapi saya memperingatkan Anda untuk berhati-hati

saya tahu apa yang Anda inginkan. Anda ingin menjalankan alat, menghapus apa yang dikatakannya, dan Anda memiliki situs yang lebih cepat di 2. 2 menit. Maaf, tapi aku akan mengecewakanmu

Saya pikir Anda harus memiliki tingkat skeptisisme yang sehat untuk alat apa pun seperti itu. Tak satu pun dari mereka benar-benar berbohong kepada Anda — mereka seringkali tidak memiliki cukup informasi untuk memberi Anda hasil yang aman dan dapat ditindaklanjuti. Itu tidak berarti Anda tidak dapat menggunakannya atau tidak dapat dilakukan. Ayo jalan-jalan

Motivasi

Saya membayangkan driver #1 untuk keinginan menghapus CSS yang tidak terpakai adalah ini

Anda menggunakan kerangka kerja CSS (mis. g. Bootstrap), termasuk seluruh file CSS framework, dan Anda hanya menggunakan beberapa pola yang disediakannya

Saya bisa berempati dengan itu. Kerangka kerja CSS sering kali tidak menyediakan cara sederhana untuk ikut serta hanya pada apa yang Anda gunakan, dan menyesuaikan sumber agar berfungsi seperti itu mungkin memerlukan tingkat keahlian yang tidak dimiliki tim Anda. Itu bahkan mungkin menjadi alasan Anda meraih kerangka kerja untuk memulai

Katakanlah Anda memuat 100 KB CSS. Saya akan mengatakan itu banyak. (Saat saya menulis, situs ini memiliki ~23 KB, dan ada cukup banyak halaman dan template. Saya tidak melakukan sesuatu yang istimewa untuk mengurangi ukurannya. ) Anda memiliki kecurigaan, atau beberapa bukti, bahwa Anda tidak menggunakan sebagian dari byte tersebut. Saya bisa melihat penyebab alarm. Jika Anda memiliki JPG 100 KB yang dapat Anda kompres menjadi 20 KB dengan menjatuhkannya ke beberapa alat, itu luar biasa dan sangat berharga. Tetapi keuntungan melakukan itu untuk CSS bahkan lebih penting karena CSS dimuat di kepala dan pemblokiran render. JPG tidak

😬 Melihat “cakupan”

DevTools Chrome memiliki tab "Cakupan" yang akan memberi tahu Anda seberapa banyak CSS dan JavaScript Anda digunakan. Misalnya, jika saya mengunjungi beranda CSS-Tricks sekarang…

Ini memberitahu saya bahwa 70. 7% dari file style.css_ saya tidak digunakan. Saya membayangkan itu benar, dan sisa CSS digunakan di tempat lain. Saya tidak hanya membuang pustaka gaya besar ke situs ini;

Saya berasumsi bahwa saya dapat mulai "merekam" lalu mengeklik di sekitar area situs yang berbeda dan melihat nomor yang tidak terpakai itu turun saat halaman berbeda dengan HTML berbeda dirender, tetapi sayangnya, saat halaman disegarkan, begitu juga tab Cakupan. Ini tidak terlalu berguna untuk mendapatkan tampilan multi-halaman pada cakupan CSS, kecuali Anda memiliki Aplikasi Satu Halaman, saya kira?

Saya benci mengatakannya tetapi saya merasa melihat cakupan kode sangat tidak berguna. Bagi saya, ini melukiskan gambaran yang mengerikan dari semua kode yang tidak digunakan di situs ini, yang memangsa keraguan saya, tetapi yang bisa saya lakukan hanyalah mengkhawatirkannya.

Ini mungkin hal yang memberi Anda gagasan bahwa CSS yang tidak digunakan perlu ditemukan dan dihapus sejak awal

Perhatian utama saya

Kekhawatiran terbesar saya adalah Anda melihat sesuatu seperti cakupan kode dan melihat baris yang tidak digunakan

Dan Anda pergi, Sempurna. Saya akan menghapus CSS itu. Dan Anda melakukannya, hanya untuk mengetahui bahwa itu sama sekali tidak digunakan dan Anda menyebabkan masalah gaya yang besar di seluruh situs. Inilah masalahnya. Anda sebenarnya tidak tahu apakah pemilih CSS tidak digunakan kecuali Anda

1. periksa cakupan di setiap halaman di seluruh situs Anda…
2. saat menjalankan semua JavaScript…
3. di bawah setiap kemungkinan kombinasi keadaan…
4. di setiap kemungkinan kombinasi kueri media yang Anda gunakan

Memeriksa beranda Anda tidak masuk hitungan. Memeriksa semua halaman tingkat teratas Anda tidak masuk hitungan. Anda harus menggali setiap halaman, termasuk status yang tidak selalu menjadi perhatian utama, belum lagi semua skenario edge-case. Jika tidak, Anda mungkin akan menghapus gaya tarik-turun untuk tarik-turun pilihan kartu kredit di modal munculan yang muncul untuk pengguna dengan akun yang dinonaktifkan yang telah masuk selama masa tenggang mereka yang juga memiliki kartu hadiah untuk diterapkan

Ini terlalu rumit untuk alat otomatis untuk menjanjikan pendekatan mereka bekerja dengan sempurna, terutama ketika mempertimbangkan konteks browser yang tidak diketahui (ukuran layar yang berbeda, kemampuan yang berbeda, browser yang berbeda) dan pihak ketiga

Ini adalah contoh kekhawatiran saya

PurifyCSS Online mengambil beberapa URL dan secara instan menyediakan potongan CSS yang dapat disalin untuk digunakan

Inilah saya menjatuhkan trik-css saya. com ke PurifyCSS Online dan dapatkan CSS baru

Ups

Itu memberi saya kesempatan untuk memasukkan URL lain (yang bagus) tetapi ada puluhan ribu URL di CSS-Tricks. Banyak dari mereka yang cukup mirip, tetapi semuanya berpotensi memiliki penyeleksi yang digunakan. Saya mendapat kesan itu tidak mengeksekusi JavaScript, karena apa pun yang masuk ke halaman melalui JavaScript dibiarkan tanpa gaya. Itu bahkan menghapus status :hover_ saya

Mungkin Anda bisa melihat mengapa kepercayaan saya pada alat ini sangat rendah

Bagian dari proses membangun

PurifyCSS mungkin lebih sering digunakan sebagai alat proses pembuatan daripada antarmuka online. Dokumen mereka memiliki instruksi untuk Grunt, Gulp, dan webpack. Misalnya, globbing file untuk memeriksa dan memprosesnya

var content = ['**/src/js/*.js', '**/src/html/*.html'];
var css = ['**/src/css/*.css'];

var options = {
  // Will write purified CSS to this file.
  output: './dist/purified.css'
};

purify(content, css, options);

Ini memberi Anda lebih banyak kesempatan untuk akurasi. Gumpalan konten itu bisa berupa daftar setiap templat, parsial, dan file JavaScript yang membangun situs Anda. Itu mungkin merepotkan untuk dipertahankan, tetapi Anda pasti akan mendapatkan lebih banyak akurasi. Itu tidak memperhitungkan konten di penyimpanan data (mis. g. posting blog ini yang ada di database) dan JavaScript pihak ketiga, tetapi mungkin itu tidak masalah bagi Anda atau Anda dapat menjelaskannya dengan cara lain

PurgeCSS, pesaing PurifyCSS, memperingatkan tentang teknik perbandingannya

PurifyCSS dapat bekerja dengan semua jenis file, bukan hanya HTML atau JavaScript. PurifyCSS bekerja dengan melihat semua kata di file Anda dan membandingkannya dengan pemilih di CSS Anda. Setiap kata dianggap sebagai pemilih, yang berarti bahwa banyak penyeleksi dapat dianggap salah digunakan. Misalnya, Anda mungkin memiliki kata dalam paragraf yang cocok dengan pemilih di CSS Anda

Jadi ingatlah itu juga. Itu bodoh dalam cara membandingkan kecocokan pemilih potensial, yang pintar dan berbahaya

UnusedCSS adalah layanan online yang merayapi situs Anda untuk Anda

Mengonfigurasi alat secara manual untuk melihat setiap halaman di situs Anda dari setiap sudut tentu saja merupakan tugas dan sesuatu yang perlu disinkronkan setiap hari saat basis kode Anda berkembang. Menariknya, layanan online UnusedCSS mencoba mengatasi beban ini dengan merayapi situs itu sendiri berdasarkan satu URL yang Anda berikan.

Saya mendaftar untuk layanan berbayar dan mengarahkannya ke CSS-Tricks. Saya akui, dengan melihat hasilnya saja, rasanya jauh lebih akurat bagi saya

Ini juga memungkinkan Anda mengunduh file yang dibersihkan dan menawarkan banyak penyesuaian, seperti mencentang/menghapus centang pada pemilih yang benar-benar Anda inginkan/tidak inginkan (mis. g. Anda melihat nama kelas yang menurutnya tidak Anda perlukan, tetapi Anda tahu pasti bahwa Anda benar-benar membutuhkannya) serta memberi awalan dan menghapus pemilih duplikat

Saya menikmati peningkatan akurasi layanan perayapan online, tetapi ada banyak kebisingan, dan saya juga tidak dapat melihat bagaimana saya menggabungkannya secara praktis ke dalam proses pembuatan dan rilis sehari-hari

Perkakas umumnya digunakan pasca-pemrosesan

Katakanlah CSS Anda dibuat dengan Less atau Sass, lalu gunakan postprocessor untuk mengompilasinya menjadi CSS. Anda mungkin akan memasukkan pembersihan CSS otomatis yang tidak terpakai di akhir pemrosesan awal CSS apa pun yang Anda lakukan. Suka…

1. Kelancangan
2. PostCSS / Autoprefixer
3. [Bersihkan CSS yang Tidak Digunakan]
4. CSS produksi

Keduanya masuk akal dan sedikit lucu bagi saya. Anda sebenarnya tidak memperbaiki gaya yang menghasilkan CSS yang tidak terpakai. Sebagai gantinya, Anda cukup menghapusnya di akhir build. Saya kira JavaScript telah melakukan hal semacam itu dengan pohon gemetar untuk sementara waktu, jadi ada presedennya, tetapi masih terasa aneh bagi saya karena basis kode CSS sangat praktis. Penyiapan ini hampir mendorong Anda untuk membuang CSS di mana pun karena tidak ada penalti untuk berlebihan. Ini menghilangkan insentif apa pun untuk memahami bagaimana CSS diterapkan dan digunakan

PurgeCSS adalah alat lain yang mengambil input eksplisit dan memberi Anda hasilnya

PurgeCSS adalah pemain lain di pasar CSS yang tidak terpakai. Satu hal tangensial yang saya sukai adalah ia menjelaskan dengan jelas perbedaannya dari alat lain. Misalnya, dibandingkan dengan PurifyCSS

Cacat terbesar dengan PurifyCSS adalah kurangnya modularitasnya. Namun, ini juga keuntungan terbesarnya. PurifyCSS dapat bekerja dengan semua jenis file, bukan hanya HTML atau JavaScript. PurifyCSS bekerja dengan melihat semua kata di file Anda dan membandingkannya dengan pemilih di CSS Anda. Setiap kata dianggap sebagai pemilih, yang berarti bahwa banyak penyeleksi dapat dianggap salah digunakan. Misalnya, Anda mungkin memiliki kata dalam paragraf yang cocok dengan pemilih di CSS Anda

PurgeCSS memperbaiki masalah ini dengan menyediakan kemungkinan untuk membuat ekstraktor. Ekstraktor adalah fungsi yang mengambil konten file dan mengekstrak daftar pemilih CSS yang digunakan di dalamnya. Ini memungkinkan penghapusan sempurna CSS yang tidak digunakan

PurgeCSS sepertinya anjing besar saat ini. Banyak orang menggunakannya dan menulis tentangnya

• Nghia Pham menulis tentang cara menggunakannya secara khusus dengan Bootstrap,
• Greg Kohn menulis peringatan posting bahwa itu tidak menghapus pemilih dalam keadaan yang tidak biasa dengan daftar putih
• Flavio Copes menulis tentang menjalankannya dengan skrip npm dan PostCSS
• Sarah Dayan dengan cermat merinci cara kerjanya dengan Tailwind

Meskipun PurgeCSS membutuhkan konfigurasi khusus untuk bekerja dengan Tailwind, sepertinya Tailwind dan PurgeCSS adalah dua kacang polong. Faktanya, dokumen mereka merekomendasikan untuk menggunakannya bersama-sama dan menyediakan CLI untuk menggunakannya dalam proses pembuatan

Saya percaya intinya adalah ini. Tailwind menghasilkan file CSS besar ini yang penuh dengan pemilih utilitas. Tetapi mereka tidak bermaksud agar Anda menggunakan semuanya. Anda menggunakan pemilih utilitas ini di HTML Anda untuk melakukan semua gaya Anda, lalu gunakan PurgeCSS untuk melihat semua HTML Anda dan singkirkan pemilih utilitas yang tidak digunakan di CSS produksi Anda

Namun, ini akan menjadi masalah pemeliharaan berkelanjutan untuk mengajarkannya tentang setiap template di situs Anda — JavaScript, HTML, atau lainnya — sambil mengonfigurasi apa pun secara manual yang bergantung pada sumber daya pihak ketiga dan mengetahui bahwa data apa pun yang berasal dari penyimpanan data mungkin

Teknik favorit saya. mintalah seseorang yang benar-benar akrab dengan basis kode CSS Anda untuk mengetahui masalah tersebut dan bertujuan untuk memperbaikinya dari waktu ke waktu

Mungkin ini terasa seperti pendekatan orang tua yang perlu menyesuaikan diri dengan waktu, tapi hei, ini terasa seperti pendekatan paling praktis bagi saya. Karena masalah ini sangat sulit, saya pikir kerja keras adalah jawabannya. Itu memahami masalah dan bekerja menuju solusi dari waktu ke waktu. Pengembang front-end yang sangat terlibat dalam front end Anda akan memiliki pemahaman tentang apa yang digunakan dan digunakan di CSS-land setelah beberapa waktu dan dapat menguranginya

Pendekatan pengujian ekstrem yang saya lihat adalah menggunakan (i. e. background-image: url(/is-this-being-used.gif?selector);) di blok CSS dan kemudian memeriksa log server dari waktu ke waktu untuk melihat apakah gambar itu telah diakses. Jika diakses, itu digunakan;

Tapi mungkin alat favorit saya di kotak peralatan potensial adalah ini

Pengujian regresi visual

Anda mengambil screenshot sebanyak mungkin dari situs Anda — seperti semua halaman terpenting dan halaman tersebut dimanipulasi menjadi status yang berbeda — plus di berbagai browser dan ukuran layar. Tangkapan layar tersebut dibuat dari cabang master Anda di Git

Kemudian, sebelum cabang mana pun digabungkan menjadi Master, Anda mengambil semua tangkapan layar itu dan membandingkannya dengan tangkapan layar di master. Tidak secara manual, tetapi secara terprogram

Itulah tepatnya yang dilakukan Percy, jadi tonton ini

Ada tusukan lain pada alat pengujian regresi visual selama bertahun-tahun, tetapi Percy adalah satu-satunya yang saya lihat yang masuk akal bagi saya. Saya tidak hanya perlu mengambil tangkapan layar; . Saya tidak hanya ingin melihat perbedaannya; . Saya juga ingin persetujuan itu untuk memblokir atau mengizinkan penggabungan dan saya ingin dapat mengontrol browser sebelum tangkapan layar diambil. Saya tidak ingin memperbarui gambar perbandingan secara manual. Itu semua barang roti dan mentega Percy

Pengungkapan penuh. Percy telah mensponsori hal-hal di sini di CSS-Tricks di sini sebelumnya — termasuk video di atas — tetapi bukan postingan ini

Hubungannya dengan Atomic CSS dan CSS-in-JS

Saya yakin ada banyak orang yang membaca ini yang akan mengatakannya. Saya tidak memiliki CSS yang tidak terpakai karena alat yang saya gunakan menghasilkan CSS yang tepat yang dibutuhkannya dan tidak lebih

Hei, itu agak keren

Mungkin itu Alat Penyemprot. Mungkin itu Tachyons yang juga Anda jalankan melalui UnCSS dan Anda sangat berhati-hati tentangnya. Mungkin kombo Tailwind + PurgeCSS yang sedang populer saat ini

Mungkin Anda menangani gaya dengan cara lain. Jika Anda menggabungkan komponen dan gaya JavaScript dengan erat, seperti React dan Emotion, atau bahkan hanya menggunakan modul CSS dengan apa pun, CSS yang tidak terpakai adalah keuntungan dari CSS-in-JS. Dan karena tree-shaking dan code-splitting ikut serta dalam banyak proses pembangunan berbasis JavaScript, Anda tidak hanya memiliki lebih sedikit CSS tetapi hanya memuat apa yang Anda butuhkan saat ini. Ada pengorbanan untuk semua ini

Bagaimana Anda menghindari CSS yang tidak digunakan dalam proyek mendatang?

Saya pikir masa depan gaya adalah pemisahan yang disengaja antara gaya global dan gaya komponen. Sebagian besar gaya dicakup ke komponen, tetapi ada pilihan gaya global yang dibuat yang memanfaatkan kaskade secara jelas (mis. g. default tipografi global)

Jika sebagian besar gaya dibiarkan terbatas pada komponen, menurut saya ada sedikit peluang untuk membangun gaya yang tidak digunakan karena jauh lebih mudah untuk memusatkan pikiran Anda pada blok kecil HTML dan blok kecil CSS yang secara langsung berhubungan satu sama lain. Dan ketika komponen mati atau berevolusi, gaya mati atau berevolusi bersamanya. Bundel CSS dibuat dari komponen yang benar-benar digunakan

Solusi CSS-in-JS secara alami menuju ke arah ini karena gaya terikat pada komponen. Itu poin utamanya, sungguh. Tapi itu tidak wajib. Saya suka pendekatan generik modul CSS, yang hampir seluruhnya untuk pelingkupan gaya dan tidak mengamanatkan Anda menggunakan beberapa kerangka kerja JavaScript tertentu

Jika semua itu tampak teoretis atau di luar jangkauan, dan Anda hanya memiliki situs Bootstrap tempat Anda mencoba mengurangi ukuran semua CSS Bootstrap itu, saya sarankan mulai dengan menggunakan Bootstrap dari sumbernya, bukan default terakhir . Sumbernya adalah SCSS dan dibangun dari kumpulan penyertaan tingkat tinggi, jadi jika Anda tidak memerlukan bagian tertentu dari Bootstrap, Anda dapat menghapusnya

Bagaimana cara menemukan kelas CSS yang tidak terpakai dalam kode Visual Studio?

Bagaimana cara menghapus CSS yang tidak digunakan dalam ekstensi kode VS?

Bagaimana cara memperbaiki CSS yang tidak terpakai?

Haruskah saya menghapus CSS yang tidak digunakan?