Cara menggunakan uncss

Stoyan sepenuhnya benar. Meskipun kita semua menyukai CSS, CSS masih merupakan pemain penting dalam cara memuat situs web dan menggunakan lebih sedikit CSS adalah hal yang baik. Dia memiliki bookmarklet baru yang rapi bernama CSS Me Not untuk membantu mendiagnosis file CSS yang tidak perlu, tetapi kita akan membahasnya sebentar lagi.

[Masalahnya] adalah bahwa CSS berada di jalur kritis, ia memblokir rendering dan seringkali bahkan eksekusi JavaScript. Kami menyukai CSS, itu ajaib, dapat melakukan kinerja luar biasa dan memperbaiki UI yang rusak dan memanipulasi gambar dan menggambar gambar yang menakjubkan. Kami menyukai CSS. Kami hanya ingin… kurang, karena sifatnya yang obstruktif

Terkadang situs kami menggunakan seluruh stylesheet yang tidak terlalu diperlukan. Saya benci mengakuinya, tetapi WordPress adalah pelanggar terkenal di sini, memuat stylesheet untuk plugin dan blok yang mungkin sebenarnya tidak Anda gunakan. Saya dalam posisi itu di situs ini saat saya menulis. Saya hanya belum menemukan waktu untuk menghapus beberapa stylesheet kecil yang tidak saya perlukan dari memuat

Stoyan untuk melihat semua file CSS. Manfaat besar, tentu saja, adalah memungkinkan Anda mengetahui apa yang Anda hadapi

Anda juga dapat menemukan lembar gaya ini di DevTools, tetapi bookmarklet CSS Me Not membuatnya lebih mudah dan memiliki fitur bonus yang mematikan. matikan lembar gaya. Menguji bookmarklet di sini di CSS-Tricks, saya dapat melihat empat lembar gaya yang dimuat WordPress (karena pengaturan dan plugin) yang saya tahu tidak saya perlukan

Jika Anda ingin melakukan ini di DevTools, Anda dapat memfilter permintaan Grid Anda dengan CSS, temukan lembar gaya yang ingin Anda nonaktifkan, klik kanan dan blokir, dan muat ulang

Saya telah berjuang selama bertahun-tahun, menghapus skrip dan gaya di WordPress yang tidak saya inginkan

Menghapus stylesheet yang sama sekali tidak terpakai adalah kemenangan yang jelas, tetapi ada masalah yang lebih sulit untuk menghapus CSS yang tidak terpakai. Saya sebutkan dalam posting itu satu cara yang benar untuk benar-benar mengetahui apakah ada CSS tertentu yang tidak digunakan, yaitu melampirkan gambar background-image ke setiap pemilih dan kemudian memeriksa log server setelah jumlah waktu produksi yang layak untuk melihat yang mana gambar-gambar itu tidak pernah diminta. Stoyan menguatkan cerita saya di sini

UnCSS adalah semacam "lab". "Dunia nyata" mungkin mengejutkan Anda. Jadi trik yang kami lakukan di SomeCompany Inc. adalah untuk melengkapi semua deklarasi CSS pada waktu pembuatan, di mana setiap pemilih mendapatkan gambar latar transparan 1x1. Kemudian telusuri log server setelah sekitar satu minggu untuk melihat apa yang sebenarnya sedang digunakan

Menggunakan CSS Saya Bukan Bookmarklet untuk Melihat (dan Menonaktifkan) File CSS awalnya diterbitkan di CSS-Tricks. Anda harus mendapatkan buletin dan menjadi pendukung

Pemfaktoran ulang CSS perlu menjadi bagian penting dari alur kerja pengembangan front-end, jika kita ingin memiliki basis kode yang dikelola dan dioptimalkan. Saat kami mereformasi CSS, kami membersihkan dan mengatur ulang kode yang ada tanpa menambahkan fitur baru atau memperbaiki bug

Refactoring membantu mencegah ledakan CSS, meningkatkan keterbacaan dan penggunaan kembali kode, serta membuat CSS lebih ramping dan lebih cepat untuk dieksekusi

Refactoring biasanya diperlukan setelah beberapa saat, karena bahkan proyek yang dimulai dengan basis kode yang sederhana dan terorganisir cepat atau lambat mulai kehilangan kejelasannya;

Cara terbaik untuk mempertahankan basis kode CSS kita adalah dengan selalu menggunakan aturan praktis "refactor early, refactor frequent". Dalam posting ini kita akan melihat beberapa tips tentang bagaimana kita dapat melakukan proses refactoring CSS yang efektif

1. Lakukan Audit Awal

Untuk mendapatkan gambaran yang lebih baik tentang apa yang perlu kami refactor, sebaiknya mulai dengan audit komprehensif untuk melihat apa yang kami miliki saat ini

Ada banyak alat online hebat yang dapat membantu kita dalam upaya ini. CSSDig adalah ekstensi Chrome yang kuat yang menganalisis CSS situs web, dan mengeksplorasi kelemahannya, seperti penyeleksi yang terlalu spesifik atau properti berulang

CSS yang tidak digunakan menyelidiki aturan CSS yang tidak digunakan, sementara alat linting, seperti CSS Lint, memungkinkan untuk menemukan kompatibilitas, perbaikan, dan masalah lainnya dengan cepat

Penting juga untuk memeriksa kode secara manual selama audit awal, karena banyak masalah di tingkat arsitektur hanya dapat ditangani dengan cara ini

2. Tetapkan Rencana yang Dapat Dikelola

Memfaktorkan ulang kode yang berfungsi selalu merupakan tugas yang menakutkan, tetapi kita dapat mengurangi rasa sakit jika kita membuat rencana tentang apa yang perlu kita lakukan, membagi proses pemfaktoran ulang menjadi potongan-potongan yang dapat dikelola, dan membuat jadwal yang layak

Dalam refactoring CSS ada hal-hal penting yang selalu perlu Anda pertimbangkan. beberapa hal yang kami refactored, mis. mengubah nama pemilih, akan mengharuskan untuk mengadaptasi kode dari file HTML dan JavaScript yang relevan juga

Oleh karena itu, merupakan ide bagus untuk melacak modifikasi tambahan yang perlu kita buat, dan memasukkannya ke dalam jadwal pemfaktoran ulang kita bersama dengan tugas utama yang terkait dengan CSS

3. Lacak Kemajuan

Sebelum memulai refactoring, ini adalah langkah penting untuk membuat cadangan file awal kami. Memperkenalkan sistem kontrol versi, seperti Git atau Subversion, ke dalam alur kerja kami juga dapat meningkatkan proses pemfaktoran ulang secara signifikan, karena kami akan memiliki registri dari langkah-langkah berurutan yang telah kami ambil, dan kami akan dapat kembali ke tahap sebelumnya jika kami ingin mengulang sesuatu

4. Tetap berpegang pada Panduan Gaya Pengkodean

Panduan gaya pengkodean yang koheren dapat sangat meningkatkan keterbacaan dan pemeliharaan kode, jadi sebelum kita mulai meningkatkan, penting untuk mengatur panduan gaya pengkodean CSS

Hal penting yang harus diputuskan adalah

• Konvensi penamaan
• aturan pemformatan
• perintah deklarasi
• unit dan nilai yang ingin kita gunakan
• aturan komentar

Jika kita tidak ingin membuat panduan gaya coding sendiri, kita juga bisa menggunakan panduan orang lain, seperti ThinkUp yang bisa ditemukan di Github

Meskipun tidak cukup hanya memperkenalkan panduan gaya pengkodean, kami juga harus mematuhinya saat kami menulis ulang kode selama pemfaktoran ulang, dan mengharapkan hal yang sama dari orang lain yang mengerjakan proyek kami.

5. Menyiapkan Struktur File yang Koheren

Setelah kita siap dengan persiapan, hal pertama yang perlu kita lakukan adalah mengatur struktur file CSS yang benar dengan mempertimbangkan sifat cascading dari CSS.

Ini terutama tergantung pada proyek bagaimana cara terbaik untuk mengatur file kami, tetapi ada beberapa aturan universal, seperti menggunakan file normalize.css terpisah untuk gaya reset CSS, global.css terpisah untuk gaya global yang digunakan di seluruh proyek, dan untuk menyimpan perpustakaan pihak ke-3 di folder terpisah

Jika kita ingin bermain aman dengan struktur file CSS kita, ada juga arsitektur siap pakai, seperti SMACSS atau ITCSS, yang menawarkan teknik efektif tentang cara mengatur file CSS dengan cara yang dapat diskalakan

6. Hilangkan Aturan yang Tidak Digunakan dan Duplikat

Setelah beberapa saat, file CSS biasanya mulai dipenuhi dengan aturan yang tidak terpakai yang perlu kita identifikasi dan bersihkan selama pemfaktoran ulang. Ada banyak alat daring yang memungkinkan kita meneliti aturan usang ini, dan terkadang juga memungkinkan kita membuangnya dengan cepat.

Alat yang paling terkenal untuk tujuan ini mungkin adalah UnCSS, sebuah Node. js yang memungkinkan untuk menyingkirkan aturan CSS yang tidak terpakai dengan cepat, dan juga memberi kami opsi konfigurasi lanjutan yang memudahkan untuk menyempurnakan proses pembersihan

Sangat penting untuk diperhatikan bahwa kita tidak perlu ingin menghapus aturan yang tidak terpakai dari semua file CSS yang kita miliki, misalnya dari stylesheet global, reset, atau pihak ketiga, jadi kita perlu mengecualikannya saat membersihkan

Seiring dengan aturan yang sudah usang, aturan duplikat juga menyebabkan pembengkakan kode yang berlebihan dan hilangnya kinerja. Kita dapat menghapusnya dengan menggunakan modul CSS Purge Node. js, tetapi kami juga dapat bekerja dengan linter CSS untuk menemukan aturan duplikat di file CSS kami

7. Kurangi Spesifisitas

Kekhususan pemilih CSS dihitung dari jumlah dan jenis pemilih di dalamnya. Spesifisitas CSS dinyatakan sebagai angka 4 digit yang paling mudah dipahami jika kita melihat kalkulator spesifisitas CSS visual ini

Kekhususan terendah (0001_) milik penyeleksi yang hanya menargetkan satu elemen HTML umum, seperti

Penyeleksi tertentu, seperti id_ atau penyeleksi yang berasal dari gaya sebaris, memiliki prioritas lebih tinggi karena menimpa gaya milik penyeleksi yang lebih umum. Misalnya, kekhususan # id1 pemilih adalah 0100

Dalam refactoring, tujuannya adalah untuk mengurangi spesifisitas pemilih (singkat) sebanyak mungkin, karena pemilih dengan spesifisitas yang lebih tinggi secara signifikan mengurangi kegunaan pemilih, dan menyebabkan basis kode membengkak

3 jenis utama penyeleksi dengan spesifisitas tinggi adalah

1. Pemilih kualitas, seperti p.class1 (mendefinisikan tag

    / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

   0 tidak diperlukan di sini, karena tidak memungkinkan untuk menggunakan kelas yang sama dengan elemen HTML lainnya)
2. Selector sangat bersarang, seperti

    / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

   1
3. ID, seperti # id1

Alat daring, seperti CSSDig yang disebutkan di Langkah 1, dapat digunakan untuk menemukan penyeleksi dengan spesifisitas tinggi ini dengan cepat. Ini juga dapat berguna untuk membuat aturan dalam panduan gaya pengkodean tentang hal-hal seperti tingkat penumpukan maksimum, atau batasan dalam menggunakan penyeleksi id

8. Menyingkirkan

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

4 Aturan

Aturan CSS yang diikuti oleh

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

Saat kita perlu menulis CSS dengan cepat, kita mungkin mulai mengandalkannya karena kesederhanaannya

Masalah utama dengan deklarasi

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

9. Hapus Angka Ajaib dan Nilai Hardcoded

Selama alur kerja CSS harian kami, terkadang kami menemukan masalah yang tidak dapat kami selesaikan, dan kami mulai menggunakan apa yang disebut angka ajaib, nilai yang berfungsi karena beberapa alasan tetapi kami tidak mengerti mengapa. Sebagai contoh, ambil contoh berikut

 .class1 position: absolute; atas: 28px; kiri: 15,5%; 

Masalah utama dengan angka ajaib adalah bahwa mereka tidak langsung, dan mereka membuat antipattern "pemrograman dengan permutasi". Selama proses pemfaktoran ulang, kita perlu menghapus aturan arbitrer ini dari kode kita, dan menggantinya dengan solusi yang paling masuk akal.

Aturan praktis yang sama juga berlaku untuk nilai hard-coded. Mungkin kemunculan nilai hard-coded paling sering ditemukan di aturan ketinggian garis

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

Nilai hard-code membuat kode kita kurang tahan masa depan dan lebih kaku, jadi sebagai bagian dari pemfaktoran ulang kita perlu menggalinya, dan menggantinya dengan nilai fleksibel

10. Unit dan Nilai Refactor

Untuk mempermudah pemeliharaan dan debugging di masa mendatang, dan untuk menghindari kegagalan yang dapat terjadi karena penggunaan unit yang berbeda, seperti

 / * buruk, kita harus menambahkan aturan tinggi-garis tetap tambahan ke elemen turunan dari .class1 * / .class1 font-size: 20px; garis-tinggi: 24px;  / * bagus, aturan ketinggian-garis yang fleksibel dapat dengan aman digunakan oleh elemen anak juga * / .class1 font-size: 20px; tinggi garis: 1.2; 

Jika kita menggunakannya secara tidak konsisten di masa lalu, kita perlu mengonversinya sehingga dapat membentuk sistem yang sederhana

Jika kami menggunakan terlalu banyak warna serupa di situs kami, sebaiknya rasionalisasi skema warna dengan mengurangi jumlah warna yang kami gunakan. (Berikut adalah postingan tentang cara memilih skema warna situs web dalam praktiknya. )