Alat untuk mengaudit CSS

Pengauditan kod CSS bukanlah tugas yang sama untuk tugas harian pemaju, tetapi kadang -kadang ia perlu dilakukan. Ini boleh menjadi sebahagian daripada penilaian prestasi untuk mengenal pasti CSS kritikal dan mengurangkan pemilih yang tidak digunakan; Ia juga boleh meningkatkan kebolehcapaian, untuk melakukan penilaian kontras pada semua warna yang digunakan dalam asas kod; Ia juga boleh menguatkuasakan konsistensi!

Atas sebab apa pun, dan apabila ini berlaku, saya biasanya menggunakan beberapa alat yang diterangkan dalam artikel ini. Tetapi sebelum memperkenalkan alat -alat, mari kita mula -mula memahami apa maksud "diaudit" CSS.

Audit CSS tidak mudah

Biasanya, pengauditan kod melibatkan menganalisis kod untuk mencari kesilapan atau penyelewengan lain, seperti masalah prestasi yang mungkin. Bagi kebanyakan bahasa pengaturcaraan, konsep pengauditan kod agak mudah: kod ini sama ada sah atau tidak sah. Tetapi CSS adalah bahasa istimewa, dan kesilapannya kebanyakannya diabaikan oleh penyemak imbas. Di samping itu, anda boleh melaksanakan gaya yang sama dengan pelbagai cara. Ini menjadikan pengauditan CSS sedikit rumit untuk mengatakan paling sedikit.

Anda boleh menggunakan pelanjutan editor kod kegemaran anda atau menubuhkan pemeriksa kod untuk mengelakkan kesilapan ini daripada ditemui. Tetapi itu bukan apa yang saya mahu tunjukkan di sini, dan itu tidak mencukupi. Kami masih boleh menggunakan terlalu banyak warna, definisi tipografi, atau z-indeks, yang semuanya boleh membawa kepada asas kod CSS yang tidak kemas, sukar untuk dikekalkan.

Untuk benar -benar mengaudit CSS, kita perlu menggali lebih mendalam dan mencari tempat yang tidak dianggap sebagai amalan terbaik. Untuk mencari tempat -tempat ini, kita boleh menggunakan alat berikut.

Alat pemaju penyemak imbas

Mari kita lihat alat yang digunakan untuk pengauditan CSS dalam alat pemaju Chrome. Saya menggunakan penyemak imbas yang berani berdasarkan kromium di sini. Anda juga mungkin ingin menyemak artikel ini oleh Umar Hansa, yang menyusun sejumlah besar ciri -ciri Devtool yang dikeluarkan pada tahun 2020.

Jika anda lebih suka menyemak kod CSS anda secara manual, anda boleh menggunakan alat pemeriksaan . Menggunakannya kita dapat melihat kod CSS yang digunakan untuk elemen tertentu. Menggunakan anak panah Inspect, kita juga dapat melihat lebih banyak maklumat mengenai warna, fon, saiz, dan aksesibiliti.

Inspektor Grid dan Flex

Terdapat banyak butiran praktikal dalam antara muka DevTools, tetapi kegemaran saya adalah pemeriksa grid dan flex. Untuk membolehkan mereka, pergi ke Tetapan (ikon pinion di sudut kanan atas alat pemaju), klik Eksperimen, dan membolehkan CSS Grid dan Flexbox debugging. Walaupun alat ini digunakan terutamanya untuk menyahpepijat masalah susun atur, saya kadang -kadang menggunakannya untuk dengan cepat menentukan sama ada grid CSS atau flexbox digunakan pada halaman.

Gambaran keseluruhan CSS

Memeriksa CSS sangat asas dan semua operasi perlu dilakukan secara manual. Mari kita lihat beberapa ciri DevTools yang lebih maju.

Gambaran keseluruhan CSS adalah salah satu daripada mereka. Untuk membolehkan alat gambaran CSS, pergi ke Tetapan, klik Eksperimen, dan kemudian aktifkan pilihan Gambaran Keseluruhan CSS. Untuk membuka panel Gambaran Keseluruhan CSS, anda boleh menggunakan kekunci pintasan CMD Shift P, ketik "Gambaran Keseluruhan CSS", dan kemudian pilih "Tunjukkan Gambaran Keseluruhan CSS". Alat ini meringkaskan sifat CSS seperti warna, fon, isu kontras, tuntutan yang tidak digunakan, dan pertanyaan media. Saya biasanya menggunakan alat ini untuk melihat bagaimana kod CSS yang baik atau buruk. Sebagai contoh, jika terdapat "50 warna kelabu" atau terlalu banyak definisi menaip, ini bermakna panduan gaya tidak diikuti, atau panduan gaya mungkin tidak wujud sama sekali.

Panel liputan kod

Perlindungan Kod Alat memaparkan jumlah dan peratusan kod yang digunakan pada halaman. Untuk melihatnya, gunakan kekunci pintasan CMD Shift P, jenis "Liputan", pilih liputan Kod Tunjukkan, dan kemudian klik ikon "Refresh".

Anda hanya boleh menapis fail CSS dengan menaip ".css" dalam input penapis URL. Saya biasanya menggunakan alat ini untuk memahami teknik penghantaran laman web ini. Sebagai contoh, jika saya melihat bahawa liputannya agak tinggi, saya boleh mengandaikan bahawa setiap halaman akan menghasilkan fail CSS secara berasingan. Ini mungkin bukan data kritikal, tetapi kadang -kadang ia membantu memahami strategi caching.

Panel rendering

Panel rendering adalah alat lain yang berguna. Untuk membuka panel rendering, gunakan CMD Shift P sekali lagi, ketik "Rendering" kali ini, dan pilih pilihan "Rendering Show". Alat ini mempunyai banyak pilihan, tetapi pilihan kegemaran saya ialah:

• Lukis Flash -Shows Rectangle Hijau Apabila peristiwa REDRAW berlaku. Saya menggunakannya untuk mengenal pasti kawasan -kawasan yang telah membuat terlalu lama.
• Layout Offset Area -Mengatakan segi empat tepat biru apabila susun atur mengimbangi. Untuk memanfaatkan pilihan ini, saya biasanya menetapkan pratetap 3G yang perlahan di bawah tab Rangkaian. Saya kadang -kadang merakam skrin dan kemudian melambatkan video untuk mencari susun atur.
• Statistik rendering bingkai -Mengatakan penggunaan masa nyata GPU dan bingkai. Alat ini sangat mudah apabila mengenal pasti animasi berat dan masalah menatal.

Alat ini tidak tersirat oleh audit biasa, tetapi saya mendapati penting untuk memahami prestasi kod CSS dan sama ada ia tidak mengalirkan tenaga peranti.

Pilihan lain mungkin lebih kondusif untuk menyahpepijat isu-isu, seperti meniru dan melumpuhkan pelbagai ciri, memaksa ciri-ciri baru-baru ini atau jenis media percetakan, dan melumpuhkan fon tempatan.

Monitor prestasi

Alat lain untuk mengaudit Kod CSS Prestasi ialah Monitor Prestasi . Untuk mengaktifkannya, gunakan CMD Shift P sekali lagi, ketik "Monitor Prestasi", dan pilih pilihan Monitor Prestasi Pertunjukan. Saya biasanya menggunakan alat ini untuk melihat berapa banyak pengiraan semula dan susun atur yang dicetuskan apabila berinteraksi dengan halaman atau apabila animasi berlaku.

Panel Prestasi

Prestasi Panel memaparkan pandangan terperinci mengenai semua peristiwa pelayar semasa memuatkan halaman. Untuk membolehkan alat prestasi, lakukan CMD Shift P, jenis prestasi, pilih Prestasi Tunjukkan, dan kemudian klik ikon Reload. Saya biasanya membolehkan pilihan tangkapan skrin dan metrik web. Metrik yang paling menarik untuk saya adalah cabutan pertama, cabutan kandungan pertama, susun atur offset dan cabutan kandungan maksimum. Terdapat juga carta pai yang menunjukkan lukisan dan masa rendering.

DevTools mungkin tidak dianggap sebagai alat audit klasik, tetapi ia dapat membantu kita memahami ciri -ciri CSS yang digunakan, kecekapan kod, dan prestasinya -semuanya adalah faktor utama dalam pengauditan.

Alat dalam talian

Devtools hanyalah alat yang berkuasa. Tetapi kita juga boleh menggunakan alat lain yang tersedia untuk mengaudit CSS.

Alat visualisasi khusus

Alat visualisasi spesifik menunjukkan kekhususan pemilih CSS dalam asas kod. Lawati laman web ini dan tampal CSS di.

Carta utama menunjukkan hubungan antara kekhususan dan kedudukan dalam lembaran gaya. Dua carta lain menunjukkan penggunaan tertentu. Saya sering menggunakan laman web ini untuk mencari pemilih "buruk". Sebagai contoh, jika saya melihat banyak spesifikasi yang ditandakan dengan warna merah, saya dapat dengan mudah menyimpulkan bahawa kod itu dapat diperbaiki. Adalah berguna untuk menyimpan tangkapan skrin untuk rujukan semasa anda bekerja keras untuk memperbaiki diri.

Penjana carta khusus CSS

CSS Specificity Chart Generator adalah alat yang sama untuk menggambarkan kekhususan. Ia menunjukkan carta yang sedikit berbeza, yang boleh membantu anda memahami bagaimana pemilih CSS dianjurkan oleh kekhususan. Seperti yang dikatakan halaman alat, "puncaknya tidak baik, dan trend keseluruhannya adalah bahawa kekhususan di sebalik lembaran gaya semakin tinggi dan lebih tinggi." Ia menarik untuk membincangkannya lebih lanjut, tetapi ia berada di luar skop artikel ini. Walau bagaimanapun, Harry Roberts menulis secara meluas dalam artikelnya "carta khusus" dan ia patut dilihat.

Statistik CSS

Statistik CSS adalah alat lain yang menyediakan analisis dan visualisasi untuk stylesheet anda. Malah, Robin menulis artikel tentangnya sebelum ini dan menunjukkan bagaimana dia menggunakannya untuk audit stylesheets di karyanya.

Anda hanya perlu memasuki URL tapak dan tekan Enter. Maklumat ini dipecah menjadi bahagian yang bermakna, dari pengisytiharan pengisytiharan ke warna, tipografi, z-indeks, kekhususan, dan banyak lagi. Sekali lagi, anda mungkin perlu menyimpan tangkapan skrin untuk rujukan masa depan.

Projek Wallace

Project Wallace dicipta oleh Bart Veneman, yang telah merangkumi projek itu di CSS-Tricks di sini. Kuasa Projek Wallace adalah bahawa ia dapat membandingkan dan memvisualisasikan perubahan berdasarkan kandungan yang diimport. Ini bermakna anda boleh melihat keadaan terdahulu asas kod CSS dan melihat bagaimana kod berubah di antara negeri. Saya dapati ciri ini sangat berguna, terutamanya jika anda ingin meyakinkan seseorang bahawa kod itu telah bertambah baik. Alat ini percuma untuk satu projek dan menawarkan rancangan berbayar untuk lebih banyak projek.

Alat CLI

Sebagai tambahan kepada devtools dan alat dalam talian, terdapat alat antara muka baris (CLI) yang membantu audit CSS.

Wallace

Salah satu alat CLI kegemaran saya ialah Wallace . Selepas pemasangan, ketik Wallace, dan kemudian taipkan nama tapak. Output menunjukkan semua maklumat yang perlu anda ketahui mengenai kod CSS tapak. Perkara kegemaran saya untuk dilihat ialah bilangan penggunaan! Penting dan bilangan ID dalam kod. Satu lagi mesej ringkas ialah nombor kekhususan tertinggi dan berapa banyak pemilih yang digunakan. Ini boleh menjadi bendera merah untuk kod "buruk".

Apa yang paling saya sukai mengenai alat ini ialah ia mengekstrak semua kod CSS dari laman web ini, bukan hanya fail luaran, tetapi juga kod sebaris. Inilah sebabnya laporan statistik CSS dan Wallace tidak sepadan.

CSSCSS

Alat CSSCSS CLI memaparkan peraturan yang berkongsi perisytiharan yang sama. Ini berguna untuk mengenal pasti kod pendua dan mengurangkan jumlah kod yang ditulis. Saya akan berfikir dua kali sebelum melakukan ini, terutamanya di bawah mekanisme caching hari ini. Perlu dinyatakan bahawa CSSCSS memerlukan Ruby.

Alat berguna lain

Alat CSS lain tidak boleh digunakan untuk pengauditan, tetapi masih berguna. Mari kita senaraikan juga:

• Warna Sorter -Sort warna CSS oleh Hue, dan kemudian dengan ketepuan.
• CSS Analyzer -mewujudkan analisis untuk rentetan CSS.
• Constyble - Ini adalah pemeriksa kod kerumitan CSS berdasarkan penganalisis CSS.
• Ekstrak CSS Sekarang - Dapatkan semua CSS dari satu halaman web.
• Dapatkan CSS - merangkak semua CSS pada halaman.
• UCSS - merangkak laman web untuk mengenal pasti CSS yang tidak digunakan.

kesimpulannya

CSS adalah di sekeliling kita dan kita perlu menganggapnya sebagai warga kelas pertama setiap projek. Apa yang difikirkan oleh orang lain tentang CSS anda tidak penting, tetapi apa yang anda fikirkan ia benar -benar penting. Sekiranya CSS anda dianjurkan dan ditulis dengan baik, anda akan menghabiskan lebih sedikit masa menyahpepijatnya dan lebih banyak masa membangunkan ciri -ciri baru. Idealnya, kami akan mendidik semua orang untuk menulis CSS yang baik, tetapi ia memerlukan masa.

Buat hari ini pada hari apabila anda mula memberi tumpuan kepada kod CSS.

Saya tahu bahawa pengauditan CSS bukan perkara yang menarik untuk semua orang. Walau bagaimanapun, jika anda menjalankan kod anda dengan mana -mana alat ini dan cuba memperbaiki mana -mana bahagian asas kod CSS, artikel ini menyelesaikan tugasnya.

Saya telah memberi perhatian lebih kepada kod CSS sejak kebelakangan ini dan saya sedang berusaha mendapatkan lebih banyak pemaju untuk menulis kod CSS dengan lebih menghormati. Saya juga memulakan projek baru di CSS-Aditors.com (bersorak untuk domain yang disatukan!) Yang didedikasikan untuk mengaudit CSS.

Jika anda tahu apa -apa alat lain, sila beritahu saya dalam komen.

Atas ialah kandungan terperinci Alat untuk mengaudit CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!