Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS

Ramai pemaju menulis tentang cara mengekalkan asas kod CSS, tetapi beberapa orang menulis tentang bagaimana mereka mengukur kualiti asas kod. Sudah tentu, kami mempunyai alat pemeriksaan kod yang sangat baik seperti Stylelint dan CSSLint, tetapi mereka hanya boleh menghalang kesilapan di peringkat mikro. Gunakan notasi warna yang salah, tambah awalan vendor apabila autoprefixer sudah digunakan, tulis pemilih dengan cara yang tidak konsisten ... dan lain -lain.

Kami sentiasa mencari cara untuk memperbaiki bagaimana CSS ditulis: OOCSS, BEM, SMACSS, ITCSS, Praktikal Pertama, dan banyak lagi. Tetapi komuniti pembangunan lain seolah-olah telah berkembang dari alat pemeriksaan kod mudah ke alat seperti Sonarqube dan PHP Mess Detector, sementara komuniti CSS masih tidak mempunyai alat pemeriksaan yang lebih mendalam daripada peraturan cetek. Untuk melakukan ini, saya mencipta Project Wallace, satu set alat untuk memeriksa dan menguatkuasakan kualiti CSS.

Apa itu Projek Wallace?

Di tengah -tengah Projek Wallace adalah satu set alat, termasuk antara muka baris arahan, pemeriksa kod, penganalisis, dan wartawan.

Berikut adalah gambaran ringkas mengenai alat ini.

Antara muka baris arahan

Ini membolehkan anda menjalankan analisis CSS pada baris arahan dan mendapatkan statistik untuk mana -mana CSS yang anda berikan kepadanya.

Pemeriksa Kod Constyble

Ini adalah pemeriksa kod yang direka khusus untuk CSS. Berdasarkan hasil analisis yang dihasilkan oleh Wallace, anda boleh menetapkan ambang yang tidak boleh dilebihi. Sebagai contoh, peraturan CSS tunggal tidak boleh mengandungi lebih daripada 10 pemilih, atau kerumitan pemilih purata tidak boleh lebih tinggi daripada 3.

Penganalisis

Extract-CSS sebagai namanya mencadangkan: Ekstrak semua CSS dari laman web supaya kami dapat menghantarnya ke ProjectWallace.com untuk analisis.

Wartawan

Semua keputusan analisis untuk ekstrak CSS dihantar ke ProjectWallace.com, dan papan pemuka mengandungi laporan semua data. Ia sama dengan statistik CSS, tetapi ia menjejaki lebih banyak metrik dan kedai hasil dari masa ke masa dan memaparkannya di papan pemuka. Ia juga menunjukkan perbezaan antara dua titik masa, serta banyak ciri lain.

Menganalisis kerumitan CSS

Tidak banyak artikel mengenai kerumitan CSS, tetapi satu Harry Roberts (CSSWizardry) menulis kagum saya. Intinya adalah bahawa setiap pemilih CSS pada dasarnya adalah sekumpulan jika pernyataan, yang mengingatkan saya tentang kerumitan gelung kaedah yang saya harus mengira secara manual ketika mengambil kursus sains komputer. Artikel Harry membuat banyak akal kepada saya kerana ia boleh menulis modul untuk mengira kerumitan pemilih CSS - tidak boleh dikelirukan dengan kekhususan, tentu saja, kerana ia adalah soalan yang sama sekali berbeza dari segi kerumitan.

Pada asasnya, kerumitan dalam CSS boleh datang dalam pelbagai bentuk, tetapi di sini adalah beberapa perkara yang saya perhatikan ketika mengkaji semula kod:

Kerumitan gelung pemilih CSS

Setiap bahagian pemilih bermaksud bahawa penyemak imbas perlu melaksanakan pernyataan lain jika. Pemilih yang lebih panjang lebih kompleks daripada pemilih yang lebih pendek. Mereka lebih sukar untuk debug, dan parsing penyemak imbas lebih perlahan dan lebih sukar untuk ditutup.

 <code>.my-selector {} /* 1 个标识符*/ .my #super [complex^="selector"] > with ~ many :identifiers {} /* 6 个标识符*/</code>

Bilangan pengisytiharan setiap set peraturan (perpaduan)

Set peraturan yang mengandungi banyak pengisytiharan lebih kompleks daripada set peraturan yang mengandungi sebilangan kecil pengisytiharan. Populariti kerangka CSS berfungsi seperti Tailwind dan Tachyon mungkin dikaitkan dengan "kesederhanaan" relatif CSS itu sendiri.

 <code>/* 1 条规则，1 个声明=> 内聚性= 1 */ .text-center { text-align: center; } /* 1 条规则，8 个声明=> 内聚性= (1 / 8) = 0.125 */ .button { background-color: blue; color: white; padding: 1em; border: 1px solid; display: inline-block; font-size: normal; font-weight: bold; text-decoration: none; }</code>

Bilangan baris kod sumber

Lebih banyak kod, semakin kerumitan. Setiap baris kod dikekalkan dan oleh itu termasuk dalam laporan.

Purata bilangan pemilih setiap peraturan

Peraturan biasanya mengandungi 1 pemilih, tetapi kadang -kadang lebih. Ini menjadikannya sukar untuk memadamkan beberapa bahagian CSS, menjadikannya lebih rumit.

Semua metrik ini boleh diperiksa kod menggunakan Constyble, pemeriksa kod kerumitan CSS yang digunakan oleh Project Wallace dalam set alatnya. Setelah mendefinisikan garis dasar untuk metrik, hanya pasang Constyble dan sediakan fail konfigurasi. Berikut adalah contoh fail konfigurasi yang saya diekstrak terus dari Constyble Readme:

 <code>{ // 不要超过4095 个选择器，否则IE9 将删除任何后续规则"selectors.total": 4095, // 我们不需要ID 选择器"selectors.id.total": 0, // 如果出现除这些颜色之外的任何其他颜色，则报告错误！ "values.colors.unique": ["#fff", "#000"] }</code>

Bahagian yang terbaik ialah Constyble berjalan pada CSS terakhir anda, jadi ia hanya melakukan operasinya selepas semua kerja pra -proses yang anda miliki dari SASS, KURANG, POSTCSS, atau mana -mana preprocessor lain yang anda gunakan. Dengan cara ini, kita boleh melakukan pemeriksaan pintar dari jumlah pemilih atau kerumitan pemilih purata - sama seperti mana -mana pemeriksa kod, anda boleh menggunakannya sebagai sebahagian daripada langkah membina dan jika ada masalah timbul, binaan anda akan gagal.

Penuaian menggunakan Projek Wallace

Selepas menggunakan Project Wallace untuk seketika, saya mendapati ia menjadi hebat untuk menjejaki kerumitan. Walaupun ia digunakan terutamanya untuk tujuan ini, ia juga merupakan cara yang baik untuk mencari kesilapan halus bahawa pemeriksa kod di CSS tidak dapat mencari, kerana mereka memeriksa kod pra -diproses. Berikut adalah beberapa perkara menarik yang saya dapati:

• Saya telah berhenti mengira bilangan cerita pengguna yang perlu membetulkan warna yang tidak konsisten di laman web semasa pecut. Terdapat projek selama beberapa tahun, dan orang yang masuk dan keluar dari syarikat: Ini adalah rahsia untuk membuat setiap warna jenama di laman web itu salah. Mujurlah, kami melaksanakan Constyble dan Project Wallace untuk mendapatkan pengiktirafan pihak berkepentingan kerana kami dapat membuktikan bahawa jenama pelanggan kami sangat tepat dalam projek -projek baru. Constyble menghalang kita daripada menambah warna yang tidak dalam panduan gaya.
• Saya telah memasang Project Wallace Webhooks dalam projek di mana bekas majikan saya berfungsi. Bila -bila masa anda menambah CSS baru ke projek anda, ia akan menghantar CSS ke ProjectWallace.com dan akan dipaparkan dengan segera di papan pemuka projek. Ini menjadikannya mudah untuk dicari apabila pemilih tertentu atau pertanyaan media ditambah kepada CSS.
• Reka bentuk semula CSS-Tricks pada awal tahun ini bermakna penurunan yang ketara dalam kerumitan dan saiz fail. Reka bentuk semula hebat dan boleh dianalisis. Ia memberi anda peluang untuk melihat dengan lebih dekat keadaan di belakang tabir dan mengetahui bagaimana penulis telah mengubah CSS mereka. Mengetahui bahagian mana yang tidak berfungsi untuk laman web ini dan bahagian -bahagian baru yang dikenakan boleh memberi anda idea tentang seberapa cepat CSS berkembang.
• Sebuah syarikat antarabangsa yang besar yang berpusat di Belanda sekali mempunyai lebih daripada 4095 pemilih dalam fail CSS. Saya tahu mereka secara aktif membangun pasaran baru muncul dan mereka perlu menyokong Internet Explorer 8. IE9 berhenti membaca semua CSS selepas 4095 pemilih, jadi kebanyakan CSS mereka tidak digunakan pada pelayar IE yang lebih tua. Saya menghantar mereka e -mel dan mereka mengesahkan isu itu dan segera menetapkannya dengan memisahkan CSS ke dalam dua fail.
• Gitlab kini menggunakan lebih daripada 70 saiz fon unik. Saya cukup yakin tipografi mereka rumit, tetapi ini nampaknya terlalu bercita -cita tinggi. Mungkin ia kerana beberapa CSS pihak ketiga, tetapi sukar untuk menilai.
• Apabila mewarisi projek dari pemaju lain, saya mengkaji hasil analisis CSS untuk memahami kesukaran projek. Adakah mereka menggunakannya dalam kuantiti yang besar! Penting? Adakah saiz set peraturan purata mudah difahami, atau adakah mereka menambah lebih daripada 20 pengisytiharan setiap peraturan? Apakah panjang pemilih purata dan adakah mereka sukar untuk ditutup? Adalah baik untuk tidak menggunakan .complex-selector-override \ [class \] [class] ... [class].
• Satu helah pandai untuk memeriksa sama ada zoom keluar berkesan adalah untuk mengadakan Constyble memeriksa sama ada penunjuk nombor baris kod tidak lebih daripada 1. CSS menyusut bermakna bahawa semua CSS diletakkan pada satu baris, jadi bilangan baris kod harus sama dengan 1!
• Apa yang berlaku sepanjang masa dalam projek saya yang lain adalah kegagalan untuk mengecut. Saya tidak tahu sehingga perbezaan dalam Project Wallace menunjukkan saya banyak warna tiba -tiba ditulis seperti #AAAAA dan bukannya #AAAA. Ini bukan perkara yang buruk dalam dirinya sendiri, tetapi ia berlaku dalam begitu banyak warna pada masa yang sama bahawa sesuatu pasti telah salah. Satu tinjauan cepat menunjukkan bahawa saya membuat kesilapan dalam mengecut.
• StackOverflow mempunyai empat cara unik untuk menulis warna putih. Ini tidak semestinya perkara yang buruk, tetapi ia boleh menjadi tanda bahawa program minifikasi CSS rosak atau tidak konsisten dalam sistem reka bentuk.
• Facebook.com mempunyai lebih daripada 650 warna unik dalam CSS mereka. Sistem reka bentuk yang rosak juga mula terdengar seperti kemungkinan.
• Satu projek dari bekas majikan saya menunjukkan input [jenis = kotak semak]: diperiksa. Inputlel [Type = Radio] Label: Fokus: Selepas adalah pemilih yang paling kompleks. Selepas pemeriksaan yang lebih dekat, kami mendapati bahawa pemilih ini mengesan input bersarang dalam input lain. Ini mustahil di HTML, dan kita fikir kita mesti melupakan koma dalam CSS. Tiada pemeriksa kod memberi amaran kepada kami mengenai perkara ini.
• Sarang dalam preprocessors CSS adalah sejuk, tetapi boleh menyebabkan perkara yang salah seperti @media (max-width: 670px) dan (max-width: 670px), seperti yang saya dapati dalam syntax.fm.

Untuk Project Wallace, ini hanyalah hujung gunung es. Sebaik sahaja anda mula menganalisis CSS anda, ada lebih banyak lagi yang perlu dipelajari dan ditemui. Jangan hanya melihat statistik anda sendiri, tetapi juga apa yang dilakukan oleh orang lain.

Saya telah menggunakan konfigurasi konstyble saya sebagai topik perbualan dengan pemaju yang kurang berpengalaman untuk menjelaskan mengapa mereka gagal membina blok CSS yang kompleks. Membincangkan dengan pemaju lain mengapa kita harus mengelakkan atau mempromosikan kaedah penulisan CSS tertentu dapat membantu memindahkan pengetahuan. Ia juga membantu saya untuk menjaga kaki saya di atas tanah. Perlu menjelaskan kepada pemaju PHP yang hanya ingin membantu, apa yang saya lakukan selama bertahun -tahun telah membuat saya memikirkan semula mengapa saya melakukan perkara seperti yang saya lakukan.

Matlamat saya bukan untuk memberitahu sesiapa yang betul atau salah dalam CSS, tetapi untuk membuat alat supaya anda dapat mengesahkan apa yang berfungsi untuk anda dan rakan sekerja anda. Projek Wallace ada di sini untuk membantu kami memahami CSS yang kami tulis.

Atas ialah kandungan terperinci Dalam mencari timbunan yang memantau kualiti dan kerumitan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!