Membersihkan Code Code-tutorial css-php.cn

Membersihkan Code Code

Anda baru sahaja diletakkan di atas projek yang sedia ada untuk menggantikan pemaju yang berlepas. Atau mungkin anda hanya membuka projek lama anda sejak beberapa tahun yang lalu. Anda berhadapan dengan ketakutan dan seram ketika melihat kod. Anda hanya boleh melakukan satu perkara: Bersihkan kekacauan ini! Adakah bunyi itu biasa dengan anda? Sudah tentu, kita semua menghadapi ini pada satu ketika atau yang lain.

Anda tahu bahawa membersihkan codebase CSS akan menjadi tugas yang luar biasa. Terdapat begitu banyak perkara yang perlu dilakukan, namun begitu sedikit masa - terutamanya apabila pelanggan/bos/rakan sekerja menganjurkan ol yang baik '"jangan membetulkan apa yang tidak patah" pepatah. Anda tidak tahu di mana untuk bermula!

baik anda beruntung kerana saya telah melakukan bahagian pembersihan CSS dan saya di sini untuk memberi anda beberapa petunjuk untuk memulakannya. Ini semua tentang meraih buah gantung yang rendah.

Takeaways Key

lint neraka dari itu

Dalam bahagian ini, saya akan menganggap asas anda menggunakan SASS. Bukan sahaja kerana ia adalah asumsi yang munasabah pada masa kini, tetapi juga kerana saya perasan penggunaan SASS yang lemah seringkali sebahagiannya bertanggungjawab untuk pangkalan kod yang kemas. Namun, artikel ini mungkin relevan kepada anda walaupun anda tidak menggunakan preprocessor, jadi tolonglah dengan saya.

Perkara pertama yang saya suka lakukan apabila saya perlu mengambil alih pangkalan kod adalah lintanya. Linting adalah proses menjalankan program yang mencari kesilapan yang berpotensi dan amalan buruk. Saya percaya membuat kod bersih adalah langkah pertama ke arah membuat kod yang baik. Berikut adalah benang limpahan timbunan yang berwawasan mengenai etimologi perkataan "lint".

Sass mempunyai Linter berasaskan Ruby yang dipanggil SCSS-Lint. Anda boleh mengkonfigurasi sendiri atau merebut fail konfigurasi yang disyorkan dari sass-gairah untuk memulakan segera. Terdapat juga versi Node.js yang dipanggil Sass-Lint, walaupun mereka tidak 100% inter-operable, jadi perbatuan anda mungkin berbeza-beza.

Cuba menjalankan SCSS-Lint pada folder SASS anda untuk memeriksa kesilapan. Kemungkinan besar anda akan terkejut dengan dinding kesilapan. Ini biasanya adalah masa di mana anda akan tergoda untuk berputus asa. Tetapi bertahan dengan saya! Pada ketika ini, anda boleh cuba membuat fail linting anda sedikit kurang ketat berkenaan dengan peraturan yang anda tidak benar -benar peduli (seperti format warna) atau anda boleh menangani binatang di depan dan menyentuh neraka!

membetulkan kesilapan linting yang dijumpai

Sudah tiba masanya untuk menetapkan apa yang perlu diperbaiki. Terdapat dua cara untuk melakukan ini. Yang pertama adalah melalui fail satu demi satu dan mengemas kini apa yang kelihatan salah dan/atau ganjil, seperti konvensyen penamaan yang buruk, pemilih yang terlalu teratur, kod yang kurang diformat, dan lain-lain. dengan sedikit carian dan ganti. Saya tidak tahu tentang anda tetapi saya suka ungkapan biasa, jadi ia sentiasa menyeronokkan apabila saya perlu melakukan ini.

Sebagai contoh, katakan anda ingin menambah sifar terkemuka yang hilang di hadapan semua nombor terapung (iaitu nilai angka antara 0 dan 1)-peraturan utama dari SCSS-Lint. Anda boleh mencari s. (D) (semua nombor mengikuti ruang dan titik) dan menggantikannya dengan 0. $ 1 (ruang, sifar, titik, dan nombor yang dijumpai). Atau jika anda ingin menghormati Peraturan Borderzero untuk SCSS-Lint, anda boleh menggantikan Sempadan: Tiada dengan Sempadan: 0 di IDE anda. Mudah seperti pai!

Saya baru-baru ini memulakan repositori SCSS-Lint-Regex di GitHub untuk mengumpulkan ungkapan biasa ini di satu tempat. Pastikan anda melihat jika anda bergelut dengan projek besar. Juga berhati -hati dengan carian dan gantikan kerana kadang -kadang mempunyai kesan sampingan yang tidak dijangka. Selepas setiap penggantian, pastikan anda melakukan perbezaan git untuk memeriksa apa yang telah dikemas kini supaya anda dapat memastikan bahawa anda tidak memperkenalkan bug.

Apabila anda selesai dengan penyuntingan transversal, anda tidak akan melarikan diri dari fail manual yang merangkak untuk membersihkan segala yang perlu dibersihkan (lekukan miskin, hilang atau garis kosong tambahan, ruang yang hilang, dan lain -lain). Ia memerlukan banyak masa, tetapi ia akan membantu banyak untuk langkah seterusnya, jadi penting untuk bermula dengan itu.

Semak semula struktur

Apa yang sering saya dapati mengganggu apabila saya mendapat kapal terbang ke projek yang sedia ada adalah ketiadaan seni bina projek yang betul. Mungkin ada satu pada mulanya, tetapi perkara -perkara biasanya keluar dari tangan dan idea ringkas metodologi ini hilang di suatu tempat di sepanjang garis. Namun, ini sangat penting.

Ia tidak benar -benar penting metodologi yang anda pilih selagi anda merasa selesa dengannya dan berpegang kepadanya. Ia boleh menjadi smacss, boleh 7-1, ia boleh ITCSS-mengambil pilihan anda! Kemudian cuba menyusun semula perkara untuk membuat kod mematuhi metodologi yang dipilih. Saya kebanyakannya menggunakan corak 7-1 yang diperkenalkan dalam garis panduan SASS, jadi saya akan memberi anda beberapa petua untuk memperbaiki perkara jika anda memutuskan untuk pergi dengan cara ini.

Mulailah dengan folder vendor kerana ia tidak meminta pertanyaan. Pindahkan mana-mana perpustakaan pihak ketiga yang tidak dibungkus ke sana (iaitu, mana-mana perpustakaan tidak dianggap sebagai kebergantungan biasa melalui NPM atau Bundler).

Kemudian, teruskan ke folder abstrak abstrak. Pastikan semua pembolehubah, campuran, fungsi dan ruang letak projek ditakrifkan di sana. Jangan ragu untuk mengaturnya dengan cara yang anda mahu di sini selagi anda tidak berakhir dengan pembolehubah dan campuran dalam semua fail codebase. Saya juga cenderung mencari pembolehubah yang tidak perlu (dan campuran) pada masa itu. Sememangnya saya sering mendapati banyak pembolehubah yang digunakan sekali atau dua kali sahaja (dengan kata lain tidak berbaloi).

Sebaik sahaja anda selesai dengan itu, itu panggilan anda. Anda boleh cuba memastikan bahawa segala -galanya di folder asas sebenarnya adalah perkara asas dan bukan komponen yang berkaitan, atau anda boleh melihat folder Akhirnya, anda perlu menangani komponen

yang mungkin menjadi tugas yang besar. Nasihat saya di sini adalah untuk cuba membuat komponen sebagai kecil dan boleh digunakan semula yang mungkin. Tidak kira jika anda menggandakan nombor, selagi anda boleh menjadikan mereka konteks agnostik dan mudah dibaca, difahami, dan kemas kini. contohnya, bukan perkara yang buruk untuk mempunyai komponen sekecil seperti ini:

berfikir modular. Kecil. Mudah. Independen.

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Salin selepas log masuk

Keluarkan kelebihan

Saya percaya perbezaan terbesar antara CSS yang baik dan buruk ialah jumlah kod yang diperlukan untuk menjadikannya Work ™. CSS sebagai bahasa cukup mudah untuk dipahami. Sesiapa sahaja boleh membuat cukup banyak susun atur dengan sedikit percubaan dan kesilapan. Walau bagaimanapun, dapat membina sesuatu dengan minimum CSS yang diperlukan untuk menjadikannya berfungsi, dan untuk memastikannya, adalah cabaran sebenar.

sudah lebih dari 3 tahun tetapi tweet ini dari Nicolas Gallagher tetap menjadi petikan kegemaran saya mengenai CSS:

Dalam "buruk" CSS, sangat sukar untuk menulis CSS "baik". Dalam "baik" CSS, sangat mudah untuk bolt pada "buruk" CSS dan memulakan kod reput.

- Nicolas (@necolas) 26 September 2012

usang adalah wabak sebenar CSS. Apabila membina sesuatu dengan CSS, kita sering pergi dan cuba beberapa perkara - ke titik di mana kita biasanya berakhir dengan beberapa perisytiharan yang tidak diperlukan. Contohnya limpahan: Tersembunyi yang menjadi tidak perlu, atau saiz fon yang tidak membezakan. Dengan meninggalkan mereka, kami menumpahkan hutang teknikal. Itulah Bad ™.

Apabila menulis CSS, apa yang saya suka lakukan sebelum melakukan sekeping kerja CSS adalah membuka alat pemaju, dan menukarkan setiap perisytiharan CSS yang saya tulis untuk melihat sama ada mereka masing -masing mempunyai kesan. Jika mereka tidak, saya bertanya kepada diri sendiri mengapa mereka berada di tempat pertama. Sekiranya mereka tidak perlu, saya mengeluarkannya. Dengan melakukan sesuatu yang semudah ini, saya pastikan hanya kod bebas sampah yang berguna untuk ditolak ke repositori.

Membersihkan codebase CSS tidak berbeza. Cari komponen yang anda ingin membersihkan, buka DevTools, dan cuba mencari pengisytiharan yang tidak berguna. Kadang -kadang untuk menghilangkan beberapa CSS, kita perlu memindahkan beberapa gaya atas pokok untuk mendapat manfaat daripada lata. Pertimbangkan contoh berikut dikurangkan kepada minimum yang kosong:

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Salin selepas log masuk

Cara yang bersih untuk mengoptimumkan ini adalah untuk memindahkan warna: Perisytiharan merah kepada ibu bapa dan biarkan lata itu melakukan yang lain. Sudah tentu, contoh kehidupan sebenar biasanya lebih kompleks, tetapi ini menunjukkan bagaimana kita kadang -kadang lupa untuk mengambil kesempatan daripada c dalam *c *ss.

CSS pandai, anda harus terlalu

Perkara yang sering saya jumpai adalah kekurangan pemahaman tentang nilai -nilai mewarisi, awal, dan currentColor. Katakan anda mahu pautan anda menjadi warna yang sama dengan teks teras (kerana garis bawah sudah cukup). Berikut adalah cara yang buruk melakukan:

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

Salin selepas log masuk

Sebab mengapa ia adalah penyelesaian yang buruk harus jelas: Jika anda menukar warna salinan badan, warna pautan akan disegerakkan. Jika anda berfikir menggunakan pembolehubah, anda membuat perkara yang tidak perlu kompleks. Di samping itu, jika pautan berakhir dalam perenggan kelabu (di dalam blockquote misalnya), ia tidak akan sepadan dengan warna!

CSS mempunyai cara terbina dalam mengendalikan ini, dengan nilai mewarisi.

<span>a {
</span>  <span>color: black; /* Nope */
</span><span>}</span>

Salin selepas log masuk

Ia semudah itu. Terima kasih kepada ini, pautan akan sentiasa mewarisi warna ibu bapa mereka. Yang mungkin juga mewarisi warna nenek moyangnya, dan sebagainya.

Di sepanjang baris yang sama, apabila menghidupkan semula harta kepada nilai lalainya, ia adalah idea yang buruk kepada nilai kod keras yang dikatakan nilai. CSS mempunyai nilai sihir awal tepat untuk senario sedemikian. Walaupun ia biasanya tidak membuat perbezaan, terdapat kes-kes di mana ia benar-benar penting, seperti dengan sifat berasaskan arah seperti Text-Align. Apabila menetapkan semula Teks-Align, tetapan kiri boleh merosakkan bahasa RTL; Awal akan menjadi cara untuk pergi (atau lebih baik, mula, tetapi nilai ini tidak mempunyai sokongan dalam IE9).

Terakhir tetapi tidak kurang, bilangan pemaju CSS yang tidak mengetahui CurrentColor terlalu tinggi. Jika anda tidak tahu mengenainya, jangan merasa buruk, tetapi tanya diri anda ini: Bagaimana apabila tidak menentukan warna sempadan, ia secara automatik sepadan dengan warna elemen? Nah, ini berlaku kerana nilai lalai untuk warna sempadan adalah CurrentColor (periksa spec). Nama yang jelas, anda akan mengakui.

Maksud saya ialah, jika anda mahu sesuatu untuk berkongsi warna dengan fon elemen, gunakan CurrentColor dan bukannya nilai keras atau pemboleh ubah SASS.

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Salin selepas log masuk

Semua perkara ini adalah ciri asas CSS. Mereka adalah apa yang membuat CSS apa itu. Namun, mereka sangat tidak digunakan. Oleh itu, jika anda perlu memperbaiki kod komponen, ini adalah jenis penambahbaikan yang anda mahu buat.

Dapatkan git anda baik

refactoring codebase CSS adalah banyak kerja. Anda mungkin mengemas kini berpuluh -puluh dan berpuluh -puluh fail. Anda juga mungkin memecahkan perkara di sepanjang jalan. Jujurlah, kita semua membuat kesilapan, dan ketika berurusan dengan perubahan besar seperti itu, ia akan menjadi sangat mengagumkan jika anda berjaya membersihkan segala -galanya tanpa salah nyata.

Kerana ini, saya sangat mengesyorkan anda mendapat sangat tegas dengan kawalan versi anda (saya fikir ia adil untuk menganggap Git di sini). Ini bermakna melakukan satu perkara dan satu perkara sahaja supaya mungkin untuk kembali ke langkah yang mengandungi bug tanpa bergelut seperti neraka dengan konflik.

Membersihkan Code Code

Saya tahu banyak orang git adalah sukar dan kabur, dan menggali bagaimana untuk menjadikannya mudah adalah jauh di luar skop artikel ini. Anda perlu mempercayai saya mengenai ini: Buat sejarah git anda puisi jika anda tidak mahu marah.

membungkusnya

mari kita berjumlah dan mempunyai sedikit TL; DR untuk pembaca malas:

Membersihkan projek CSS/SASS adalah sukar kerana sukar untuk menilai kesan kemas kini atau penyingkiran garis CSS. Ini kebanyakannya kerana CSS tidak dapat diuji. Kerana ini, anda perlu berhati -hati.

Mulailah dengan linting kod anda supaya ia menjadi cantik. Mulakan dengan ini untuk menjadikan hidup anda lebih mudah di kemudian hari. Ini juga merupakan cara yang baik untuk mendapatkan gambaran yang berharga mengenai keadaan codebase tanpa mengambil risiko banyak (menetapkan kotoran sintaksis tidak mungkin menyebabkan masalah).

Seterusnya, pastikan projek anda merangkumi metodologi struktur. Tidak kira yang mana, selagi ia dilakukan dengan betul. Jika projek anda tidak benar -benar dirancang ke dalam komponen, ini akan menjadi peluang yang baik untuk memulakan jalan ini. Cari bahagian antara muka yang boleh diguna semula, dan ekstrak gaya mereka ke dalam sebahagian mereka sendiri. Jangan ragu untuk mendokumentasikannya sedikit sehingga menjadi lebih mudah dan anda merasai perkembangan.

Sebaik sahaja anda telah membersihkan projek dan meletakkan segala -galanya di tempat yang betul, sudah tiba masanya untuk memperbaiki CSS itu sendiri. Semak jika anda boleh mengeluarkan perkara terlebih dahulu; Kami sering menulis terlalu banyak kod. Kemudian cuba mengoptimumkan kod supaya ia kurang berulang. Berhati-hatilah untuk tidak terlalu lama! Anda sepatutnya mengeluarkan kerumitan, tidak menambahnya. Juga berasa bebas untuk mengulas semua yang anda lakukan yang mungkin tidak kelihatan jelas pada pandangan pertama.

Akhirnya, lakukan kerja anda dengan kerap dan logik. Bundarkan perubahan anda dalam komitmen kecil yang melakukan satu perkara setiap satu jadi mudah untuk kembali dalam sejarah jika ada yang salah.

Terakhir, tetapi tidak kurang, jangan lupa untuk meraikan apabila anda selesai. Nasib baik!

Soalan Lazim (Soalan Lazim) Mengenai Membersihkan Code Code

Apakah kepentingan membersihkan codebase CSS?

Membersihkan asas CSS adalah penting untuk beberapa sebab. Pertama, ia meningkatkan kebolehbacaan kod, menjadikannya lebih mudah bagi pemaju lain untuk memahami dan bekerja. Kedua, ia meningkatkan prestasi laman web atau aplikasi sebagai kod yang tidak perlu atau berlebihan dikeluarkan. Ini boleh membawa kepada masa beban yang lebih cepat dan pengalaman pengguna yang lebih baik. Akhir sekali, asas kod bersih lebih mudah untuk mengekalkan dan debug, menjimatkan masa dan sumber dalam jangka masa panjang. Bantu mengenal pasti kod CSS yang tidak digunakan atau berlebihan. Ini termasuk alat pemaju pelayar, alat liputan CSS, dan pelbagai perkhidmatan dalam talian. Di samping itu, semakan kod manual juga boleh memberi manfaat, terutamanya untuk mengenal pasti kelebihan atau ketidakkonsistenan dalam kod. Kod CSS Codebase termasuk membuang kod yang tidak digunakan atau berlebihan, menganjurkan kod secara logik dan konsisten, menggunakan komen untuk menerangkan bahagian kod kompleks, dan mematuhi konsisten Konvensyen Penamaan. Di samping itu, menggunakan preprocessor CSS boleh membantu mengurus dan mengekalkan kod besar yang besar. amalan. Ini termasuk menulis kod modular, boleh diguna semula, mematuhi konvensyen penamaan yang konsisten, dan menggunakan komen untuk menerangkan bahagian kod kompleks. Di samping itu, ulasan kod biasa dapat membantu menangkap isu -isu awal sebelum mereka menjadi masalah yang lebih besar. Membersihkan asas CSS. Ia membolehkan penggunaan pembolehubah, bersarang, campuran, dan ciri -ciri lain yang boleh menjadikan kod lebih mudah dibaca dan dikekalkan. Di samping itu, ia dapat membantu mengautomasikan tugas -tugas seperti minifikasi dan autoprefixing, meningkatkan lagi kebersihan dan kecekapan codebase.