Kā Refactor CSS - A Guide

CSS refactoring ir jābūt būtiskai priekšplāna izstrādes darbplūsmas sastāvdaļai, ja mēs vēlamies pārvaldīt un optimizēt koda bāzi. Kad mēs atgriežam CSS, mēs sakopt un reorganizēt mūsu esošo kodu nepievienojot jaunas funkcijas vai fiksējot kļūdas.

Refactoring palīdz novērš CSS sprādzienu, uzlabo kodu nolasāmību un atkārtotu izmantošanu, un padara CSS gludāku un ātrāku izpildi.

Refaktorēšana parasti ir nepieciešama pēc kāda laika, jo pat projekti, kas sākās ar kodolīgu un organizētu koda bāzi, agrāk vai vēlāk sāk zaudēt skaidrību; parādās konsekvence, novecojuši noteikumi un kodu dublikātu daļas; un mēs arī sākam ignorēt stilus un izmantot arvien vairāk hacks un workarounds.

Labākais veids, kā uzturēt mūsu CSS kodu bāzi, ir noturēties pie “agresīvi, bieži atgriežas” īkšķis. Šajā amatā mēs apskatīsim dažus padomus par to, kā mēs varam veikt efektīvu CSS refactoring procesu.

1. Veikt sākotnējo revīziju

Lai iegūtu labāku priekšstatu par to, kas mums ir nepieciešams, lai tas būtu labāks, tas ir labākais sākt ar visaptverošu revīziju, lai redzētu, kas mums pašlaik ir.

Ir daudzi lieliski tiešsaistes rīki, kas var palīdzēt mums šajā darbā. CSSDig ir spēcīgs Chrome paplašinājums, kas analizē tīmekļa vietnes CSS un pēta tās nepilnības, piemēram, pārāk specifiskus atlasītājus vai atkārtotas īpašības.

Neizmantotā CSS pēta neizmantotos CSS noteikumus, savukārt drukas rīki, piemēram, CSS Lint, ļauj ātri atrast saderību, uzturamību un citus jautājumus..

Ir svarīgi arī manuāli pārbaudīt kodu sākotnējās revīzijas laikā, jo daudzas problēmas arhitektūras līmenī var tikt nozvejotas tikai šādā veidā.

2. Izveidojiet pārvaldāmu plānu

Darba koda atjaunošana vienmēr ir grūts uzdevums, bet mēs varam atvieglot sāpes, ja mēs izveidosim plānu par to, kas mums jādara, sagrieziet refaktorēšanas procesu uz pārvaldāmiem gabaliem un izveidojiet realizējamu grafiku.

CSS refactoring ir ļoti svarīga lieta, kas mums vienmēr ir jāņem vērā: dažas lietas, kuras mēs atveidojam, piem. mainot selektora nosaukumus, tas to darīs nepieciešams pielāgot attiecīgo HTML un JavaScript failu kodu arī.

Tāpēc ir laba ideja izsekot tālākām papildu izmaiņām, kas mums būs jāveic, un veidojiet tos mūsu refactoring grafikā kopā ar galvenajiem ar CSS saistītiem uzdevumiem.

3. Track Progress

Pirms uzsākat rekonstrukciju, tas ir būtisks solis dublējiet mūsu sākotnējos failus. Ieviešot versiju kontroles sistēmu, piemēram, Git vai Subversion, mūsu darbplūsmā var arī ievērojami uzlabot refactoring procesu, jo mums būs reģistrs par veiktajām secīgajām darbībām, un mēs varēs atgriezties iepriekšējā posmā, ja vēlamies pārtaisīt lietas.

4. Ievietojiet kodēšanas stila rokasgrāmatu

Saskaņots kodēšanas stila ceļvedis var ievērojami uzlabot kodu lasāmību un uzturamību, tāpēc pirms mēs sākam refaktoru, tas ir būtiski izveidot CSS kodēšanas stila rokasgrāmatu.

Svarīgās lietas, par kurām jāpieņem lēmums, ir:

• nosaukumi
• formatēšanas noteikumi
• deklarācijas rīkojumu
• vienības un vērtības, kuras mēs vēlamies izmantot
• komentēšanas noteikumi

Ja nevēlamies izveidot savu kodēšanas stila rokasgrāmatu, mēs varam izmantot arī kādu citu personu, piemēram, ThinkUp, ko var atrast pakalpojumā Github.

Nepietiek, lai tikai ieviestu kodēšanas stila rokasgrāmatu pieturieties pie tā, kad mēs pārrakstām kodu atjaunošanas laikā un sagaidīt to pašu no visiem pārējiem kurš strādā pie mūsu projekta.

5. Iestatiet saskaņotu failu struktūru

Pēc tam, kad mēs esam gatavi sagatavošanās darbiem, pirmā lieta, kas mums jādara, ir izveidot pareizu CSS datņu struktūru, kas pievērš uzmanību CSS pakāpeniskajai būtībai..

Tas galvenokārt ir atkarīgs no projekta, kā vislabāk organizēt mūsu failus, bet ir daži vispārīgi noteikumi, piemēram, atsevišķa lietošana normalize.css failu CSS atiestatīšanas stiliem, atsevišķi global.css globāliem stiliem, kas tiek izmantoti visā projektā, un saglabāt trešās puses bibliotēkas atsevišķā mapē.

Ja mēs vēlamies spēlēt drošu ar mūsu CSS failu struktūru, ir arī gatavas arhitektūras, piemēram, SMACSS vai ITCSS, kas piedāvā efektīvus paņēmienus par kā organizēt CSS failus mērogojamā veidā.

6. Atbrīvoties no neizmantotiem un dublētiem noteikumiem

Pēc kāda laika, CSS faili parasti sāk pārpilnībā izmantot neizmantotos noteikumus, kas mums ir jāidentificē un jāattīra, veicot atjaunošanu. Ir daudzi tiešsaistes rīki, kas ļauj mums izmeklēt šos novecojušos noteikumus, un dažreiz arī ļauj mums ātri tos grāvēt.

Vispazīstamākais līdzeklis šim nolūkam, iespējams, ir UncSS, Node.js modulis, kas ļauj ātri atbrīvoties no neizmantotajiem CSS noteikumiem, kā arī nodrošina mūs ar sarežģītām konfigurācijas opcijām, kas atvieglo tīrīšanas procesa precizēšanu..

Ir svarīgi ņemt vērā to, ka mēs ne vienmēr vēlaties noņemt neizmantotos noteikumus viss CSS datnes mums ir, piemēram, no globālajām, atiestatīšanas vai trešās puses stilu lapām, tāpēc mums ir nepieciešams izslēgt veicot tīrīšanu.

Kopā ar novecojušiem noteikumiem dublējošie noteikumi rada arī lieku kodu uzpūšanos un darbības zudumu. Mēs varam tos noņemt, izmantojot moduli CSS Purge Node.js, bet mēs varam arī strādāt CSS slāņi, lai meklētu dublētus noteikumus mūsu CSS failos.

7. Samazināt specifiskumu

CSS selektora specifika tiek aprēķināta no tajā esošo iekšējo selektoru skaita un tipiem. CSS specifika ir izteikta kā 4 ciparu numurs, kas ir visvieglāk saprotams, ja mēs pārbaudām šo vizuālo CSS specifikācijas kalkulatoru:

Zemākā specifika (0001) pieder selektoriem, kas attiecas tikai uz vienu vispārēju HTML elementu, piemēram,

vai

. Jo vairāk iekšējo selektoru ir savienojuma selektors, jo augstāka ir tā specifika.

Daži selektori, piemēram, ID vai selektoriem, kas nāk no iekšējiem stiliem, ir augstākas prioritātes, jo tās ignorē vairāk vispārīgākos selektorus. Piemēram,. \ T # id1 selektors ir 0100.

Rekonstruējot, mērķis ir samazināt selektoru specifiku (saglabāt to īsu), cik vien iespējams selektori ar lielāku specifiskumu ievērojami samazina selektora atkārtotu izmantojamību, un noved pie uzpampis koda bāzes.

Trīs galvenie augstas specifitātes selektoru veidi ir:

1. Kvalificēti selektori, piemēram, p.class1 (definējot. \ t p ir nevajadzīga, jo tas neļauj izmantot to pašu klasi ar citiem HTML elementiem)
2. Dziļi ligzdoti selektori, piemēram, .1. klase .class3 .class4…
3. ID, piemēram, # id1

Tiešsaistes rīkus, piemēram, 1. solī minētos CSSDig, var izmantot, lai ātri atrastu šos augstas precizitātes selektorus. Tāpat var būt lietderīgi noteikt noteikumu kodēšanas stila rokasgrāmatā par lietām, piemēram, maksimālo ligzdošanas līmeni vai ierobežojumu lietošanai ID selektori.

8. Nezāles !svarīgs Noteikumi

CSS noteikumi, kam seko !svarīgs paziņojums ignorē parastos stila noteikumus. Lietošana !svarīgs agrāk vai vēlāk noved pie nesaskaņota koda. Tas nav nejaušība, ka vairums šūšanas rīku atzīmē tās kā kļūdas.

Kad mums ir nepieciešams ātri rakstīt CSS, mēs varam tos paļauties, lai gan tie ir vienkārši.

Galvenā problēma ar !svarīgs Deklarācijas ir tādas, ka, ja mēs vēlamies tos ignorēt nākotnē, mums ir nepieciešams vēl vairāk !svarīgs lietošanas deklarācijas, tāpēc vislabāk ir tos izspiest, kur tas ir iespējams, refactoring procesā.

9. Notīriet burvju skaitļus un cietās kodētās vērtības

Ikdienas CSS darbplūsmas laikā dažreiz mēs nonākam pie problēmām, kuras mēs nevaram atrisināt, un mēs sākam izmantot tā saukto burvju numuri, vērtības, kas darbojas dažu iemeslu dēļ, bet mēs nesaprotam, kāpēc. Piemēram, veiciet šādu piemēru:

 .class1 amats: absolūts; tops: 28px; pa kreisi: 15,5%; 

Galvenā maģisko numuru problēma ir tā, ka tās ir netiešs, un tie iemieso “programmēšana ar permutāciju” antipattern. Rekonstruēšanas procesa laikā mums ir jānovērš šie patvaļīgie noteikumi no mūsu koda un jāaizstāj ar saprātīgākiem risinājumiem, kur vien tas ir iespējams.

Tiek piemērots tas pats noteikums grūti kodētas vērtības arī. Iespējams, ka visbiežāk sastopamās grūti kodētās vērtības var atrast līnijas augstuma noteikumos:

 / * slikti, mums vajadzēs pievienot papildu fiksēto līniju augstuma noteikumus .class1 * / .class1 font-size: 20px; līnijas augstums: 24px;  / * labs, elastīgo līniju augstuma noteikumu var droši lietot arī bērnu elementi * / .class1 font-size: 20px; līnijas augstums: 1.2; 

Grūti kodētas vērtības padara mūsu kodu mazāk drošu nākotnei un stingrāku, tāpēc kā daļa no refactoring mums ir jāapstrādā, un aizstāt tos ar elastīgām vērtībām.

10. Refactor vienības un vērtības

Lai nākotnē atvieglotu uzturēšanu un atkļūdošanu, kā arī lai izvairītos no neveiksmēm, kas var rasties, lietojot dažādas vienības, piemēram, em un px, vienlaicīgi mums ir nepieciešams ievērot saskaņotus noteikumus par to, kā mēs izmantojam relatīvās un absolūtās vērtības.

Ja mēs agrāk tos neizmantojam, mums tie ir jāpārveido tā, lai tie varētu veidot īsu sistēmu

Ja mūsu vietnē izmantojam pārāk daudz līdzīgu krāsu, tas var būt arī gudrs racionalizēt krāsu shēmu samazinot izmantoto krāsu skaitu. (Šeit ir ziņa par to, kā praktiski izvēlēties vietnes krāsu shēmu.)