Laman » Toolkit » 4 Alat untuk Audit dan Optimumkan CSS

    4 Alat untuk Audit dan Optimumkan CSS

    Sebaik sahaja tapak web anda mula berkembang, begitu juga dengan kod anda. Apabila kod anda berkembang, CSS mungkin tiba-tiba menjadi sukar untuk dijaga, dan anda mungkin akan menimpa satu peraturan CSS dengan yang lain. Ini merumitkan perkara dan anda mungkin akan berakhir dengan banyak bug.

    Jika ini berlaku kepada anda, sudah tiba masanya untuk anda audit CSS tapak anda. Mengaudit CSS anda akan membolehkan anda mengenal pasti bahagian CSS anda yang tidak dioptimumkan. Anda juga boleh mengurangkan fail fail stylesheet dengan menghilangkan barisan kod yang memperlambat prestasi laman web anda.

    Berikut adalah 5 alat yang baik untuk membantu anda mengaudit dan mengoptimumkan CSS.

    Jenis-o-matic

    Jenis-o-matic adalah plugin Firebug untuk menganalisis fon yang digunakan dalam laman web. Plugin ini memberikan laporan visual dalam jadual, yang mengandungi sifat font seperti keluarga font, saiz, berat, warna, dan juga bilangan kali font digunakan dalam halaman web. Melalui jadual laporan, anda boleh mengoptimumkan penggunaan font dengan mudah, mengalih keluar apa yang tidak perlu, atau menggabungkan gaya yang terlalu serupa.

    CSS Lint

    CSS Lint ialah linting alat yang menganalisis sintaks CSS berdasarkan parameter tertentu yang alamat untuk prestasi, kebolehcapaian, dan keserasian CSS anda. Anda akan terkejut dengan hasilnya, menjangkakan banyak amaran dalam CSS anda. Walau bagaimanapun, kesilapan ini akhirnya akan membantu anda membetulkan sintaks CSS, dan menjadikannya lebih cekap. Di samping itu, anda juga akan menjadi penulis CSS yang lebih baik.

    CSS ColorGuard

    CSS ColorGuard adalah alat yang agak baru. Ia dibina sebagai modul Node dan ia berjalan di semua platform: Windows, OS X, dan Linux. CSS ColorGuard adalah alat baris arahan yang akan memberitahu anda jika anda menggunakan warna yang sama dalam lembaran gaya anda; contohnya. # f3f3f3 cukup dekat # f4f4f4, jadi anda mungkin mahu mempertimbangkan penggabungan kedua-dua. CSS ColorGuard boleh dikonfigurasikan, anda boleh menetapkan ambang persamaan serta menetapkan warna yang anda mahu alat itu abaikan.

    CSS Dig

    CSS Dig adalah skrip Python dan berfungsi secara tempatan pada komputer anda. CSS Dig akan menjalankan pemeriksaan menyeluruh dalam CSS anda. Ia akan membaca dan menggabungkan sifat-sifat contohnya. semua perisytiharan warna latar belakang akan diletakkan di bawah bahagian latar belakang. Dengan cara itu, anda boleh membuat keputusan dengan mudah berdasarkan laporan apabila cuba menyeragamkan sintaks CSS anda misalnya. anda mungkin menemui warna merentasi gaya dengan deklarasi warna berikut.

     warna: #ccc; warna: #cccccc; warna: #CCC; warna: #CCCCCC; 

    Deklarasi warna ini melakukan perkara yang sama. Anda mungkin juga pergi dengan #ccc atau dengan modal #CCC sebagai standard. CSS Dig boleh mendedahkan redundansi ini untuk sifat CSS lain juga, dan anda akan dapat membuat kod anda lebih konsisten.