Kako preoblikovati CSS - vodnik
Če želimo imeti obvladljivo in optimizirano osnoven kodo, mora biti preoblikovanje CSS bistven del vmesnega razvojnega poteka dela. Ko preoblikujemo CSS, mi očistiti in reorganizirati obstoječo kodo brez dodajanja novih funkcij ali odpravljanja napak.
Pomaga pri refactoringu prepreči eksplozijo CSS, izboljša berljivost in ponovno uporabo kode, in naredi CSS sleeker in hitrejši za izvedbo.
Refaktoring je navadno potreben čez nekaj časa, saj celo projekti, ki so se začeli s strnjeno in organizirano kodno bazo, prej ali slej izgubijo jasnost; pojavijo se doslednost, zastarela pravila in deli podvojene kode; začnemo pa tudi preglasiti sloge in uporabiti vedno več hakov in rešitev.
Najboljši način za vzdrževanje naše osnove CSS kode je vzdrževanje “refactor zgodaj, refactor pogosto” pravilo palca. V tem prispevku si bomo ogledali nekaj nasvetov o tem, kako lahko izvedemo učinkovit proces refaktoriranja CSS.
1. Izvajanje začetne revizije
Da bi imeli boljšo sliko o tem, kaj moramo preoblikovati, je najbolje začeti s celovito revizijo, da bi videli, kaj imamo trenutno.
Obstaja veliko odličnih spletnih orodij, ki nam lahko pomagajo pri tem prizadevanju. CSSDig je zmogljiva razširitev za Chrome, ki analizira CSS spletnega mesta in raziskuje njene slabosti, kot so preveč specifični selektorji ali ponavljajoče se lastnosti.
Neuporabljen CSS raziskuje neuporabljena pravila CSS, orodja za nameščanje, kot je CSS Lint, pa omogočajo hitro iskanje kompatibilnosti, vzdržljivosti in drugih težav..
Pomembno je tudi ročno preverjanje kode med začetno revizijo, saj je lahko veliko težav na arhitekturni ravni ujetih samo na ta način..
2. Pripravite upravljalni načrt
Delovna koda za preoblikovanje je vedno zastrašujoča naloga, vendar pa lahko zmanjšamo bolečino, če izdelamo načrt o tem, kaj moramo storiti, razdelimo proces refactoringa na obvladljive kose in naredimo izvedljiv urnik.
V preoblikovanju CSS je ključna stvar, ki jo moramo vedno upoštevati: nekatere stvari, ki jih preoblikujemo, npr. spreminjanje izbirnih imen potrebno prilagoditi kodo ustreznih datotek HTML in JavaScript prav tako.
Zato je dobra ideja spremljajte te dodatne spremembe, ki jih bomo morali izvesti, in vgradite jih v naš urnik preoblikovanja skupaj z osnovnimi nalogami, povezanimi s CSS.
3. Sledite napredku
Preden se lotimo prenove, je to bistven korak varnostno kopirajte naše začetne datoteke. Uvajanje sistema za nadzor različic, kot sta Git ali Subversion, v naš potek dela lahko tudi bistveno izboljša postopek preoblikovanja, saj bomo imeli register o zaporednih korakih, ki smo jih izvedli, in se bomo lahko vrnili na prejšnjo stopnjo, če želimo ponoviti stvari.
4. Držite se priročnika za stil kodiranja
Vodnik po slogu koherentnega kodiranja lahko izjemno izboljša berljivost in vzdržljivost kode, zato je pred začetkom preoblikovanja ključnega pomena nastavite vodnik za stil kodiranja CSS.
Pomembne stvari, o katerih se morate odločiti, so:
- konvencij o poimenovanju
- pravila za oblikovanje
- deklaracija
- enote in vrednosti, ki jih želimo uporabiti
- pravila za komentiranje
Če ne želimo ustvariti lastnega priročnika za kodiranje, lahko uporabimo tudi nekoga drugega, kot je na primer ThinkUp, ki ga najdete na Githubu..
Ni pa dovolj, da samo uvedemo vodnik po slogu kodiranja, kar moramo storiti držite se tega, ko prepišemo kodo med refaktoriranjem in enako pričakujete od vseh drugih ki dela na našem projektu.
5. Nastavite skladno datoteko
Ko smo pripravljeni na priprave, moramo najprej vzpostaviti ustrezno datotečno strukturo CSS, ki bo posvečala pozornost kaskadni naravi CSS-ja..
V glavnem je odvisno od projekta, kako najbolje organizirati naše datoteke, vendar obstajajo nekatera univerzalna pravila, kot je uporaba ločenega normalize.css datoteka za stile ponastavitve CSS, ločeno global.css za globalne sloge, ki se uporabljajo v celotnem projektu, in za shranjevanje knjižnic tretjih strank v ločeno mapo.
Če želimo igrati s svojo datotečno strukturo CSS, obstajajo tudi že pripravljene arhitekture, kot je SMACSS ali ITCSS, ki ponujajo učinkovite tehnike o kako organizirati CSS datoteke na prilagodljiv način.
6. Znebite se neuporabljenih in podvojenih pravil
Čez nekaj časa se datoteke CSS običajno začnejo izčrpati z neuporabljenimi pravili, ki jih moramo identificirati in očistiti med refaktoriranjem. Obstaja veliko spletnih orodij, ki nam omogočajo preučiti zastarela pravila, in včasih nam tudi omogočajo, da jih hitro odvrgnemo.
Najbolj znano orodje za ta namen je verjetno UnCSS, modul Node.js, ki omogoča hitro odstranitev neuporabljenih pravil CSS, prav tako pa nam nudi prefinjene konfiguracijske možnosti, ki omogočajo preprosto prilagoditev postopka čiščenja..
Pomembno je upoštevati, da smo ne želite nujno odstraniti neuporabljenih pravil iz vse datoteke CSS, ki jih imamo, na primer iz globalnih, ponastavljenih ali tretjih slogov slogov, zato moramo jih izključite med izvajanjem čiščenja.
Skupaj z zastarelimi pravili tudi podvojena pravila vodijo v odvečno kodiranje in izgubo zmogljivosti. Lahko jih odstranimo z uporabo modula CSS Purge Node.js, vendar lahko tudi delamo CSS linters za iskanje dvojnih pravil v naših CSS datotekah.
7. Zmanjšajte specifičnost
Specifičnost CSS selektorja se izračuna iz števila in tipov notranjih selektorjev, ki jih vsebuje. Specifičnost CSS je izražena kot štirimestno število, ki je najlažje razumeti, če pogledamo ta vizualni kalkulator podrobnosti CSS:
Najnižja specifičnost (0001) pripada selektorjem, ki ciljajo le na en splošni element HTML, na primer ali . Več notranjih selektorjev vsebuje izbirnik zmesi, večja je njegova specifičnost.
Nekateri selektorji, kot npr id ali selektorji, ki prihajajo iz vgrajenih slogov, imajo višje prednostne naloge, ker preglasijo sloge, ki pripadajo več generičnim selektorjem. Na primer specifičnost. \ T # id1 izbirnik je 0100.
Pri refactoringu je cilj zmanjšati specifičnost selektorjev (jih obdržati kratek), kolikor je to mogoče selektorji z večjo specifičnostjo bistveno zmanjšajo možnost večkratne uporabe selektorja, in vodijo do napihnjene baze.
Tri glavne vrste selektorjev visoke specifičnosti so:
- Usposobljeni selektorji, kot naprimer
p.class1(opredelitevstrje nepotrebna, ker onemogoča uporabo istega razreda z drugimi elementi HTML) - Globoko ugnezdeni selektorji, kot naprimer
.class1 .class2 .class3 .class4… - ID-ji, kot naprimer
# id1
Spletna orodja, kot je CSSDig, omenjeno v 1. koraku, se lahko uporabijo za hitro iskanje teh visoko specifičnih selektorjev. Prav tako je lahko koristno v pravilniku za slog kodiranja nastaviti pravilo o stvareh, kot je najvišja stopnja gnezdenja ali omejitev uporabe id izbirnikov.
8. Weed Out !pomembno Pravila
Pravila CSS, ki jim sledi !pomembno stavek prevlada nad običajnimi slogi. Uporaba !pomembno praviloma prej ali slej vodi do neskladnega kode. Ni naključje, da jih večina orodij za označevanje označuje kot napako.
Ko moramo hitro napisati CSS, se lahko začnemo zanašati nanje, čeprav zaradi njihove preprostosti.
Glavni problem z !pomembno Deklaracije so, da jih moramo v prihodnosti preoblikovati, še bolj !pomembno deklaracij, ki jih uporabljate, zato je najbolje, da jih izločite, kadar koli je to mogoče med postopkom preoblikovanja.
9. Očistite čarobne številke in trde kodirane vrednosti
Med vsakodnevnim potekom dela v CSS-u se včasih lotimo vprašanj, ki jih ne moremo rešiti, in začnemo uporabljati tako imenovane številke, vrednosti, ki delujejo iz nekaterih razlogov, vendar ne razumemo, zakaj. Na primer vzemite naslednji primer:
.class1 položaj: absolutno; vrh: 28 pikslov; levo: 15,5%;
Glavni problem s čarobnimi številkami je, da so okoliščine, in poosebljajo “programiranje s permutacijo” antipattern. Med procesom preoblikovanja moramo odstraniti ta samovoljna pravila iz naše kode in jih nadomestiti z bolj razumnimi rešitvami, kjer koli je to mogoče.
Enako pravilo velja za trde kodirane vrednosti prav tako. Verjetno je najpogostejša pojavnost kodiranih vrednosti mogoče najti v pravilih višine vrstice:
/ * slabo, za podrejene elemente .class1 * / .class1 velikosti pisave: 20px; višina vrstice: 24px; / * dobro, fleksibilno pravilo višinske linije lahko varno uporabljajo tudi podrejeni elementi * / .class1 font-size: 20px; višina proge: 1,2;
Zaradi težko kodiranih vrednosti je naša koda manj odporna na prihodnost in je bolj toga, zato jih moramo kot del preoblikovanja izkopati in zamenjati s prilagodljivimi vrednostmi.
10. Enote in vrednosti refaktorjev
Za lažje vzdrževanje in odpravljanje napak v prihodnosti in za preprečevanje napak, ki lahko nastanejo zaradi uporabe različnih enot, kot je npr em in px, hkrati moramo držimo se skladnih pravil o tem, kako uporabljamo relativne in absolutne vrednosti.
Če smo jih v preteklosti nedosledno uporabljali, jih moramo spremeniti tako, da lahko tvorijo jedrnat sistem
Če uporabljamo preveč podobnih barv na naši spletni strani, je lahko tudi pametno racionalizirati barvno shemo z zmanjšanjem števila barv, ki jih uporabljamo. (Tukaj je post o tem, kako na praktičen način izbrati barvno shemo spletnega mesta.)
