Kaip Refactor CSS - A vadovas

Jei norime turėti valdomą ir optimizuotą kodų bazę, CSS refaktoravimas turi būti esminė „front-end“ plėtros darbo eigos dalis. Kai mes atkuriame CSS, mes išvalyti ir reorganizuoti esamą kodą be jokių naujų funkcijų ar klaidų.

Refactoring padeda užkirsti kelią CSS sprogimui, pagerina kodų skaitomumą ir pakartotinį naudojimą, ir CSS sklandesnis ir greitesnis.

Refaktoravimas paprastai reikalingas po kurio laiko, nes netgi projektai, kurie anksčiau ar vėliau prasidėjo glaustu ir organizuotu kodų pagrindu, praranda savo aiškumą; atsiranda nuoseklumas, pasenusios taisyklės ir kartotinės kodo dalys; ir mes taip pat pradėjome ignoruoti stilius ir įdarbinti vis daugiau ir daugiau problemų.

Geriausias būdas išlaikyti mūsų CSS kodo bazę yra palaikomas “refaktorius anksti, dažnai atsikratykite” nykščio taisyklė. Šiame pranešime pažvelgsime į kai kuriuos patarimus, kaip galime atlikti veiksmingą CSS refactoring procesą.

1. Atlikti pradinį auditą

Norint geriau suprasti, kas mums reikalinga, tai geriausia pradėkite visapusišką auditą, kad pamatytumėte, ką mes turime.

Yra daug puikių internetinių įrankių, galinčių padėti šiam tikslui. „CSSDig“ yra galingas „Chrome“ plėtinys, kuris analizuoja svetainės CSS ir tiria jo trūkumus, pvz., Pernelyg specifinius pasirinktuvus arba pasikartojančias savybes.

Nepanaudota CSS tiria nepanaudotas CSS taisykles, o pūkelių įrankiai, tokie kaip CSS Lint, leidžia greitai rasti kompiliavimo, priežiūros ir kitus klausimus.

Taip pat svarbu rankiniu būdu išnagrinėti kodą per pradinį auditą, nes daugelis architektūrinio lygio problemų gali būti sugautos tik taip.

2. Sukurti valdomą planą

Darbo kodo redagavimas visada yra nelengvas uždavinys, tačiau galime palengvinti skausmą, jei sukursime planą apie tai, ką turime padaryti, supjaustyti refaktoravimo procesą į valdomus gabalus ir sudaryti galimą tvarkaraštį.

CSS refactoring'e yra labai svarbus dalykas, į kurį visada reikia atsižvelgti: kai kuriuos dalykus, kuriuos mes atkuriame, pvz. keisdami selektoriaus vardus, tai padarys reikia koreguoti atitinkamų HTML ir „JavaScript“ failų kodą taip pat.

Todėl gera idėja sekite šiuos papildomus pakeitimus, kuriuos turėsime atlikti, ir sukurti juos į mūsų atnaujinimo grafiką kartu su pagrindinėmis su CSS susijusiomis užduotimis.

3. Stebėkite pažangą

Prieš pradedant rekonstruoti, tai yra esminis žingsnis atsargines mūsų pradinių failų kopijas. Įdiegus versijos valdymo sistemą, pvz., „Git“ arba „Subversion“, į mūsų darbo eigą taip pat gali būti gerokai patobulintas refaktoravimo procesas, nes turėsime registrą apie nuoseklius veiksmus, kurių mes ėmėmės, ir mes sugebės grįžti į ankstesnį etapą, jei norime iš naujo ištaisyti.

4. Laikykitės kodavimo stiliaus vadovo

Suderintas kodavimo stiliaus vadovas gali žymiai pagerinti kodų įskaitomumą ir prieinamumą, todėl prieš pradedant refactor tai yra būtina nustatyti CSS kodavimo stiliaus vadovą.

Svarbūs dalykai, dėl kurių reikia nuspręsti, yra šie:

• pavadinimų konvencijas
• formatavimo taisyklės
• deklaravimo tvarka
• vienetų ir vertybių, kurias norime naudoti
• komentavimo taisyklės

Jei nenorime sukurti savo kodavimo stiliaus vadovo, galime naudoti ir kito asmens, pvz., „ThinkUp“, kurį galima rasti „Github“.

Nepakanka tik įvesti kodavimo stiliaus vadovą, taip pat turime laikykitės to, kai perrašome kodą refaktoravimo metu, ir tikėtis to paties iš visų kitų kas dirba su mūsų projektu.

5. Nustatykite suderintą failo struktūrą

Pasiruošę paruošimui, pirmas dalykas, kurį turime padaryti, yra sukurti tinkamą CSS failų struktūrą, kuri atkreiptų dėmesį į CSS pakopinį pobūdį..

Tai daugiausia priklauso nuo projekto, kaip geriausiai organizuoti savo failus, tačiau yra keletas universalių taisyklių, pvz., Naudoti atskirą normalize.css CSS reset stilių failas, atskiras global.css pasaulinio stiliaus, naudojamo visame projekte, ir saugoti trečiųjų šalių bibliotekas atskirame aplanke.

Jei norime žaisti saugiai su CSS failų struktūra, taip pat yra parengtos architektūros, pvz., SMACSS arba ITCSS, kurios siūlo efektyvias technologijas apie kaip organizuoti CSS failus keičiamu būdu.

6. Atsikratykite nepanaudotų ir pasikartojančių taisyklių

Po kurio laiko CSS failai paprastai pradeda gausiai naudotis nepanaudotomis taisyklėmis, kurias turime nustatyti ir išvalyti refaktoravimo metu. Yra daug internetinių įrankių, leidžiančių mums ištirti šias pasenusias taisykles, ir kartais taip pat leidžia mums greitai juos griovti.

Geriausiai žinoma priemonė šiam tikslui tikriausiai yra „UnCSS“, „Node.js“ modulis, leidžiantis greitai atsikratyti nepanaudotų CSS taisyklių, ir taip pat suteikia mums sudėtingas konfigūravimo parinktis, kurios leidžia lengvai sureguliuoti valymo procesą.

Svarbu atsižvelgti į tai, kad mes nebūtinai norite pašalinti nepanaudotas taisykles visi CSS failai, pvz., iš pasaulinių, iš naujo nustatytų ar trečiųjų šalių stilių lapų, todėl mums reikia juos pašalinti atliekant valymą.

Kartu su pasenusiomis taisyklėmis dvigubos taisyklės taip pat lemia nereikalingą kodo prakaitavimą ir našumo praradimą. Mes galime juos pašalinti naudodami „CSS Purge Node.js“ modulį, bet taip pat galime dirbti CSS sluoksniai, kad galėtumėte ieškoti pasikartojančių taisyklių mūsų CSS failuose.

7. Sumažinti specifiškumą

CSS selektoriaus specifiškumas apskaičiuojamas pagal jame esančių vidinių selektorių skaičių ir tipus. CSS specifiškumas išreiškiamas kaip keturių skaitmenų numeris, kurį lengviausia suprasti, jei patikrinsime šį vaizdinį CSS specifikacijos skaičiuoklį:

Mažiausias specifiškumas (0001) priklauso selektoriams, kurie nukreipia tik vieną bendrą HTML elementą, pvz.,

arba

. Kuo daugiau vidinių selektorių yra sudėtinis selektorius, tuo didesnis jo specifiškumas.

Tam tikri selektoriai, pvz ID arba pasirinktys, gaunamos iš inline stilių, turi aukštesnius prioritetus, nes jie nepaiso stilių, priklausančių bendresniems pasirinkėjams. Pavyzdžiui,. \ T # id1 selektorius yra 0100.

Atliekant rekonstrukciją, siekiama sumažinti selektorių specifiškumą (laikyti juos trumpais) tiek, kiek įmanoma didesnio specifiškumo selektoriai žymiai sumažina selektoriaus pakartotinį naudojimą, ir sukelti išpūstą kodą.

Trys pagrindiniai didelio specifiškumo selektorių tipai yra:

1. Kvalifikuoti selektoriai, toks kaip p.class1 (apibrėžiant. \ t p žymė yra nereikalinga, nes dėl to neįmanoma naudoti tos pačios klasės su kitais HTML elementais)
2. Giliai įdėtos selektoriai, toks kaip .class1 .class2 .class3 .class4…
3. ID, toks kaip # id1

Internetinės priemonės, pvz., CSSDig, paminėtos 1 veiksme, gali būti naudojamos greitai surasti šiuos didelio specifiškumo selektorius. Taip pat gali būti naudinga kodavimo stiliaus vadove nustatyti taisyklę apie tokius dalykus kaip maksimalus lizdavimo lygis arba naudojimo apribojimas ID selektorių.

8. Išnykimas !svarbu Taisyklės

CSS taisyklės, po kurių seka !svarbu pareiškimas nepaiso įprastų stiliaus taisyklių. Naudojimas !svarbu anksčiau ar vėliau sukelti nesuderinamą kodą. Tai nėra atsitiktinumas, kai dauguma įdirbimo įrankių juos žymi kaip klaidą.

Kai mums reikia greitai parašyti CSS, mes galime pasikliauti jais dėl savo paprastumo.

Pagrindinė problema !svarbu deklaracijos yra tai, kad, jei norime ateityje jas ignoruoti, turime dar daugiau !svarbu naudojimo deklaracijas, todėl geriausia juos išpjauti, kur tik įmanoma, refaktoravimo proceso metu.

9. Išvalykite „Magic“ numerius ir „Hard Coded“ reikšmes

Per kasdienį CSS darbo eigą kartais susiduriame su problemomis, kurių negalime išspręsti, ir mes pradėsime naudoti vadinamuosius magijos numeriai, vertybių, kurios veikia dėl tam tikrų priežasčių, bet mes nesuprantame, kodėl. Pavyzdžiui, atlikite šį pavyzdį:

 .class1 pozicija: absoliutus; viršuje: 28px; kairėje: 15,5%; 

Pagrindinė magijos numerių problema yra ta, kad jie yra netiesioginis, ir jie įkūnija “programavimas pagal permutaciją” antipattern. Atnaujinimo proceso metu turime pašalinti šias savavališkas taisykles iš mūsų kodo ir pakeisti jas priimtinesniais sprendimais, kur tik įmanoma.

Ta pati taisyklė taikoma nykščiai sunkiai koduotų verčių taip pat. Tikriausiai dažniausiai pasitaikančius sunkiai koduotus dydžius galima rasti linijos aukščio taisyklėse:

 / * blogai, mes turime pridėti papildomų fiksuotų linijų aukščio taisyklių .class1 * / .class1 font-size: 20px; vaikų elementams; linijos aukštis: 24px;  / * gera, lanksčios linijos aukščio taisyklę gali saugiai naudoti ir vaikų elementai * / .class1 font-size: 20px; linijos aukštis: 1,2; 

Sunkiai koduotos vertės daro mūsų kodą mažiau patikima ir nelankstesnę, todėl, kaip dalį refaktoravimo, turime juos iškasti ir pakeisti jas lanksčiomis vertybėmis.

10. Refaktoriaus vienetai ir vertės

Kad ateityje būtų lengviau atlikti techninę priežiūrą ir derinti, ir išvengti nesėkmių, galinčių atsirasti naudojant skirtingus įrenginius, pvz em ir px, vienu metu turime laikytis nuoseklių taisyklių, kaip mes naudojame santykines ir absoliučias vertes.

Jei anksčiau juos panaudojome nenuosekliai, turime juos konvertuoti taip, kad jie galėtų sudaryti glaustą sistemą

Jei mūsų svetainėje naudojame per daug panašių spalvų, tai taip pat gali būti protingas dalykas racionalizuoti spalvų schemą mažinant naudojamų spalvų skaičių. (Čia pateikiamas pranešimas apie tai, kaip pasirinkti praktinę svetainių spalvų schemą.)