Hari ini kami menerbitkan bagian kedua dari terjemahan materi tentang perlawanan terhadap kode CSS yang tidak digunakan.
→
Bagian pertamaPemrosesan pasca CSS
Misalkan dalam beberapa proyek, CSS ditulis menggunakan Less atau Sass, dan kemudian sebuah postprocessor digunakan untuk mengkompilasi kode yang ada menjadi CSS biasa. Dalam proyek semacam itu, mungkin, ada sistem otomatis untuk menghilangkan CSS yang tidak digunakan, yang dimulai setelah preprocessing CSS. Ini mungkin terlihat seperti ini:
- Sass.
- PostCSS / sistem awalan otomatis.
- Menghapus CSS yang tidak digunakan.
- Kode CSS siap diproduksi.
Ini, di satu sisi, masuk akal, dan di sisi lain - terlihat sedikit aneh di mata saya. Intinya adalah bahwa dengan pendekatan ini, kode sumber yang berisi perintah stylization tidak diperbaiki, atas dasar yang mana kode CSS yang dihasilkan dibuat, yang juga termasuk CSS yang tidak digunakan. Alih-alih, CSS yang tidak perlu dihapus begitu saja di akhir proses pembuatan. Saya menduga bahwa dalam JavaScript, ketika menerapkan algoritma pengocokan pohon, sesuatu yang serupa telah dilakukan selama beberapa waktu. Artinya, penanganan dengan CSS seperti itu bukanlah berita sama sekali. Tetapi bagi saya, ini semua sepertinya salah, karena basis kode CSS adalah sesuatu yang bisa dikatakan terletak di permukaan proyek web. Pendekatan semacam itu hampir mendorong pengembang untuk dengan ceroboh menulis CSS, untuk memasukkan semuanya ke dalam kode sumber CSS. Dan kenyataannya adalah bahwa sistem akan menyingkirkan CSS yang tidak perlu secara otomatis. Tapi ini benar-benar menghilangkan keinginan pengembang untuk memahami dengan tepat bagaimana desain mereka ditata, bagaimana tepatnya CSS digunakan di dalamnya.
Purgecss
PurgeCSS adalah proyek lain yang bertujuan untuk memerangi CSS yang tidak digunakan. Meskipun ini tidak secara langsung berkaitan dengan kemampuan proyek ini, saya menyukainya karena dokumentasinya jelas menjelaskan
perbedaannya dari para pesaing. Di atas, kami telah memberikan potongan perbandingan antara PurgeCSS dan PurifyCSS. Dan berikut ini adalah kutipan lain dari dokumentasi PurgeCSS yang didedikasikan untuk PurifyCSS. Intinya adalah bahwa masalah utama dengan PurifyCSS adalah modularitas rendah dari proyek ini. Namun, inilah kekuatan utama PurifyCSS. Seperti yang telah disebutkan, PurifyCSS menganggap kata-kata CSS adalah semua kata yang ditemukan dalam file. Pendekatan ini penuh dengan kesalahan. Tetapi PurifyCSS memecahkan masalah ini dengan memungkinkan untuk membuat fungsi ekstraktor. Fungsi semacam itu mengambil isi file dan mengekstrak darinya daftar pemilih CSS yang digunakan di dalamnya. Ini memungkinkan Anda untuk memecahkan masalah menyingkirkan kode CSS yang tidak terpakai dengan sangat baik.
Proyek PurgeCSS sekarang terlihat seperti pemain utama dalam pasar pembersihan kode CSS. Banyak yang menggunakannya, banyak yang menulis tentang itu.
- Berikut ini materi tentang cara menggunakan PurgeCSS, khususnya ketika bekerja dengan Bootstrap.
- Dari artikel ini , Anda dapat mengetahui bahwa PurgeCSS tidak akan menghapus pemilih dalam keadaan tidak biasa menggunakan daftar putih.
- Di sini Anda dapat mempelajari tentang bagaimana PurgeCSS digunakan bersama dengan skrip npm dan dengan PostCSS.
- Ini berbicara tentang bagaimana PurgeCSS bekerja dengan Tailwind.
Terlepas dari kenyataan bahwa PurgeCSS membutuhkan penyetelan khusus untuk bekerja dengan Tailwind, tampaknya kedua alat ini secara sempurna dikombinasikan satu sama lain. Bahkan, bahkan dalam
dokumentasi Tailwind
, Anda dapat menemukan rekomendasi untuk membagikannya. Dan PurgeCSS memiliki
alat baris perintah untuk menerapkannya dalam proses membangun proyek.
Saya pikir esensi dari ini bermuara sebagai berikut: Tailwind membuat file CSS besar penuh penyeleksi pembantu. Tetapi tidak diasumsikan bahwa semua penyeleksi ini akan digunakan dalam proyek. Pengembang menggunakannya untuk menyelesaikan semua masalah penataan kode HTML-nya, dan kemudian PurgeCSS menganalisis kode-HTML ini dan menghapus pemilih yang tidak perlu, membentuk CSS yang siap untuk diproduksi.
Benar, PurgeCSS masih perlu diinformasikan tentang setiap file HTML dan JavaScript yang digunakan di situs. Dengan kata lain, Anda perlu mengonfigurasi segala sesuatu yang terkait dengan sumber daya eksternal secara independen, dan mempertimbangkan fakta bahwa data yang masuk ke proyek dari penyimpanan tertentu mungkin tidak dapat dianalisis selama perakitan proyek. Akibatnya, penggunaan PurgeCSS dalam perakitan proyek melibatkan sejumlah besar pekerjaan manual.
Pendekatan favorit saya untuk menyingkirkan CSS yang tidak digunakan
Yang paling saya sukai adalah pendekatan berikut untuk menghapus CSS yang tidak perlu. Ini berarti bahwa akan ada seseorang dalam tim pengembangan proyek yang sangat akrab dengan kode CSS proyek ini. Orang ini harus menyadari masalah gaya saat ini dan harus secara bertahap menyelesaikannya. Mungkin ini adalah pandangan yang sudah ketinggalan zaman tentang situasi milik seseorang yang harus mengikuti perkembangan zaman. Tetapi bagi saya, bagaimanapun juga, itu tampaknya pendekatan yang paling praktis. Menimbang bahwa tugas yang kami pertimbangkan sangat sulit untuk diselesaikan, saya pikir jawaban atas tantangan yang diajukan tugas ini kepada para pengembang bisa menjadi kerja keras. Jawabannya adalah pemahaman tentang masalah dan solusi bertahapnya. Pengembang front-end yang akrab dengan proyek dan tahu apa yang digunakan di dalamnya dan apa yang tidak dapat menyelesaikan masalah ini.
Saya melihat satu pendekatan ekstrem untuk mencari tahu apakah pemilih situs digunakan. Blok CSS menggunakan desain seperti
background-image: url(/is-this-being-used.gif?selector); . Setelah penerapannya, log server diperiksa secara berkala untuk mengetahui apakah permintaan dibuat untuk menerima gambar yang sesuai. Jika ada permintaan seperti itu, maka blok CSS yang sedang diselidiki digunakan. Jika tidak, maka itu tidak digunakan.
Tapi mungkin alat favorit saya di toolkit CSS explorer yang tidak digunakan adalah yang akan dibahas di bagian selanjutnya.
Studi proyek dengan regresi visual
Metode ini terdiri dari kenyataan bahwa pengembang mengambil tangkapan layar sebanyak mungkin dari situs. Mereka membuat salinan layar halaman yang paling penting, dan halaman itu, yang tampilannya tergantung pada keadaan aplikasi. Tangkapan layar diambil di berbagai browser, dengan ukuran layar yang berbeda. Cuplikan layar ini dibuat berdasarkan materi dari cabang
master repositori proyek.
Kemudian, sebelum menggabungkan cabang lain dengan cabang
master , tangkapan layar baru dibuat berdasarkan bahan cabang baru, dan dibandingkan dengan yang dibuat untuk cabang
master . Ini, tentu saja, tidak dilakukan secara manual, tetapi secara terprogram.
Sebenarnya,
ini adalah video yang menunjukkannya.
Perlu dicatat bahwa banyak yang telah dikatakan pada topik alat untuk mempelajari regresi visual, tetapi
penulis video ini adalah satu-satunya orang yang menjelaskan semuanya dengan sangat cerdas. Anda tidak perlu hanya mengambil tangkapan layar; Anda perlu membandingkannya dan mencari perbedaan di antara mereka. Seseorang tidak hanya harus menemukan perbedaan; Anda harus menerima atau menolaknya. Selain itu, perlu bahwa adopsi atau persetujuan perubahan akan mempengaruhi proses penggabungan cabang dalam repositori. Selain itu, pengembang harus dapat mengkonfigurasi browser sebelum mengambil salinan layar dan kemampuan untuk mengotomatiskan pekerjaan dengan screenshot yang diambil.
CSS Atom dan CSS-in-JS
Saya yakin bahwa banyak pembaca materi ini dapat mengatakan: "Saya tidak memiliki CSS yang tidak digunakan, karena alat yang saya gunakan menghasilkan persis kode yang saya butuhkan dan tidak lebih."
Jika demikian, maka ini luar biasa.
Mungkin kita berbicara tentang
Alat Penyemprot . Mungkin ini adalah alat
Tachyons , yang hasilnya dilewatkan melalui
UnCSS dan berhati-hati. Mungkin - ini adalah kombinasi dari
Tailwind +
PurgeCSS , yang sekarang
banyak terdengar.
Mungkin - entah bagaimana mereka masih bekerja dengan gaya. Jika seseorang secara dekat menautkan komponen dan gaya JavaScript, misalnya, seperti ketika menggunakan React and Emotion, atau bahkan hanya menerapkan modul CSS dengan apa saja, salah satu keuntungan dari pendekatan CSS-in-JS tersebut adalah pengurangan volume CSS yang tidak digunakan dalam proyek jadi. Selain itu, karena banyak proyek berbasis JavaScript menggunakan algoritma pengguncang pohon dan teknik pemisahan kode, proyek semacam itu tidak hanya memiliki lebih sedikit CSS yang tidak perlu. Dalam perjalanan pekerjaan mereka, hanya apa yang dibutuhkan dalam setiap situasi spesifik yang akan dimuat. Tapi, tentu saja,
ada kelemahan pada pendekatan seperti itu untuk bekerja dengan CSS.
Ringkasan
Sekarang mari kita berpikir tentang bagaimana cara menghindari munculnya kode CSS yang tidak perlu dalam proyek masa depan kita. Saya percaya bahwa masa depan gaya adalah pemisahan antara gaya global dan gaya yang diterapkan pada masing-masing komponen. Sebagian besar gaya terbatas pada lingkup komponen, tetapi ada gaya global yang dapat digunakan untuk mengeksploitasi sifat cascading CSS. Misalnya, itu mungkin sesuatu seperti pengaturan tipografi standar global.
Jika sebagian besar gaya dibatasi oleh cakupan komponen, maka saya pikir gaya yang tidak perlu cenderung menembus proyek yang sudah jadi, karena mudah bagi pengembang untuk menyelidiki hubungan antara fragmen HTML dan CSS yang kecil dan terkait erat. Dan ketika komponen dihapus dari proyek atau dikembangkan, stylization meninggalkan proyek atau berkembang bersamanya. Sebagai hasilnya, rakitan CSS dibuat berdasarkan komponen yang sebenarnya digunakan dalam proyek.
Teknologi CSS-in-JS bergerak secara alami ke arah itu. Saat menerapkan teknologi seperti itu, gaya terikat ke komponen. Dan ini adalah hal terpenting dalam hal ini. Tetapi gaya mengikat komponen adalah opsional. Saya suka pendekatan universal, yang melibatkan penggunaan
modul CSS . Ini hampir sepenuhnya bertujuan untuk memisahkan ruang lingkup gaya dan tidak memaksa pengembang untuk menggunakan kerangka kerja JavaScript tertentu.
Mungkin semua hal di atas tampak bagi Anda sesuatu yang teoritis atau jauh dari kebutuhan nyata pengembang web. Anda hanya memiliki situs yang menggunakan Bootstrap, dan ingin mengurangi ukuran CSS yang dimuat pengguna situs ini. Jika demikian, saya akan menyarankan Anda untuk menggunakan kode sumber Bootstrap daripada membangun standar. Kode sumber ini ditulis menggunakan SCSS dan terdiri dari banyak plug-in. Ini berarti bahwa jika Anda tidak memerlukan beberapa bagian Bootstrap, Anda dapat menonaktifkan modul yang sesuai.
Menghapus modul dropdown, lencana, dan remah roti dari Bootstrap sebelum membangun proyekSaya berharap Anda semua semoga sukses dalam perjuangan yang sulit dengan kode-CSS yang tidak perlu.
Pembaca yang budiman! Bagaimana Anda menangani kode CSS yang tidak terpakai yang masuk ke produksi?
