Kako prepraviti CSS - vodič
CSS refactoring treba biti bitan dio front-end razvojnog toka, ako želimo imati podesnu i optimiziranu bazu koda. Kada prerađujemo CSS, mi očistite i reorganizirajte naš postojeći kod bez dodavanja novih značajki ili popravljanja bugova.
Refactoring pomaže spriječiti eksploziju CSS-a, poboljšava čitljivost koda i mogućnost ponovnog korištenja, i čini CSS uglađenijim i bržim za izvršavanje.
Refactoring je obično potrebno nakon nekog vremena, jer čak i projekti koji su započeli sa sažetom i organiziranom bazom kodova prije ili kasnije počinju gubiti svoju jasnoću; pojavljuju se dosljednost, zastarjela pravila i dijelovi duplikata koda; također počinjemo nadjačavati stilove i zapošljavamo sve više hakova i zaobilaznih rješenja.
Najbolji način da održimo našu bazu CSS koda održivim je da se držimo “refactor rano, refactor često” pravilo palca. U ovom postu ćemo pogledati nekoliko savjeta o tome kako možemo provesti učinkovit proces refakcije CSS-a.
1. Provesti početnu reviziju
Da biste imali bolju sliku o tome što trebamo preraditi, najbolje je započeti s opsežnom revizijom kako bi vidjeli što trenutno imamo.
Postoje mnogi veliki online alati koji nam mogu pomoći u ovom nastojanju. CSSDig je moćno Chrome proširenje koje analizira CSS web-lokacije i istražuje njegove slabosti, kao što su previše specifični selektori ili repetitivna svojstva.
Neiskorišteni CSS istražuje neiskorištena pravila CSS-a, dok alati za ispisivanje, kao što je CSS Lint, omogućuju brzo pronalaženje kompatibilnosti, mogućnosti održavanja i drugih problema.
Također je važno ručno pregledati kod tijekom početne revizije, budući da se mnogi problemi na arhitektonskoj razini mogu uhvatiti samo na taj način..
2. Postavite upravljivi plan
Radni kôd za prepravljanje je uvijek težak zadatak, ali možemo ublažiti bol ako izradimo plan o tome što trebamo učiniti, rezimo proces refactoringa do upravljivih dijelova i napravimo izvediv raspored.
U CSS refactoringu postoji ključna stvar koju uvijek trebamo uzeti u obzir: neke stvari koje prerađujemo, npr. mijenjanjem imena selektora potrebno je podesiti kod relevantnih HTML i JavaScript datoteka također.
Stoga je dobra ideja pratite ove dodatne izmjene koje trebamo izvršiti, i ugradite ih u naš raspored refactoringa uz primarne zadatke povezane s CSS-om.
3. Pratite napredak
Prije nego što krenemo u refactoring, to je bitan korak izradite sigurnosne kopije naših početnih datoteka. Uvođenje sustava kontrole verzija, kao što su Git ili Subversion, u naš tijek rada može također značajno poboljšati proces refactoringa, jer ćemo imati registar o sekvencijalnim koracima koje smo poduzeli, a će se moći vratiti na prethodnu fazu ako želimo ponoviti stvari.
4. Držite se vodiča za stil kodiranja
Vodič za koherentni stil kodiranja može značajno poboljšati čitljivost koda i mogućnost održavanja, pa je prije nego što započnemo s refaktorom bitno postaviti CSS vodič za stil kodiranja.
Važne stvari za odlučivanje su:
- konvencije imenovanja
- pravila oblikovanja
- redoslijed deklaracija
- jedinice i vrijednosti koje želimo koristiti
- pravila za komentiranje
Ako ne želimo stvoriti vlastiti vodič za stil kodiranja, možemo koristiti i tuđe, kao što je ThinkUp, koji se može pronaći na Githubu.
Nije dovoljno da samo uvedemo vodič za stil kodiranja, također trebamo držati se toga kad prepisujemo kod tijekom refactoringa, i isto očekujte od svih ostalih koji radi na našem projektu.
5. Postavite koherentnu strukturu datoteka
Nakon što smo spremni za pripreme, prvo što trebamo učiniti je postaviti odgovarajuću CSS datotečnu strukturu koja obraća pozornost na kaskadnu prirodu CSS-a.
To uglavnom ovisi o projektu kako najbolje organizirati naše datoteke, ali postoje neka univerzalna pravila, kao što je korištenje zasebnog normalize.css datoteku za CSS stilove poništavanja, zasebna global.css za globalne stilove koji se koriste u cijelom projektu te za spremanje knjižnica trećih strana u zasebnu mapu.
Ako želimo igrati sigurnu strukturu CSS datoteka, postoje i gotove arhitekture, kao što su SMACSS ili ITCSS, koje nude učinkovite tehnike o kako organizirati CSS datoteke na skalabilan način.
6. Oslobodite se neiskorištenih i dvostrukih pravila
Nakon nekog vremena, CSS datoteke obično počinju obilovati neiskorištenim pravilima koja trebamo identificirati i očistiti tijekom refactoringa. Postoje mnogi online alati koji nam omogućuju istražite ta zastarjela pravila, i ponekad nam također dopuštaju da ih brzo riješimo.
Najpoznatiji alat u tu svrhu je vjerojatno UnCSS, Node.js modul koji omogućuje brzo uklanjanje neiskorištenih pravila CSS-a, a pruža nam i sofisticirane konfiguracijske opcije koje olakšavaju fino podešavanje procesa čišćenja..
Važno je uzeti u obzir da smo mi ne nužno želite ukloniti neiskorištena pravila iz svi CSS datoteke koje imamo, primjerice, iz globalnih, resetiranih ili slogovnih stilova treće strane, stoga trebamo isključiti ih tijekom čišćenja.
Zajedno s zastarjelim pravilima, duplicirana pravila također dovode do suvišnog širenja koda i gubitka performansi. Možemo ih ukloniti pomoću CSS Purge Node.js modula, ali također možemo raditi CSS linters za pretraživanje duplih pravila u našim CSS datotekama.
7. Smanjite specifičnost
Specifičnost CSS selektora izračunava se iz broja i tipova unutarnjih selektora koje sadrži. CSS specifičnost izražava se kao četveroznamenkasti broj koji je najlakše razumjeti ako pogledamo ovaj vizualni kalkulator specifičnosti CSS-a:
Najniža specifičnost (0001) pripada selektorima koji ciljaju samo jedan opći HTML element, kao što je ili . Što unutarnji selektor sadrži spojnik, to je njegova specifičnost viša.
Određeni selektori, kao što su iskaznica ili selektori koji dolaze iz ugrađenih stilova, imaju više prioritete jer nadjačavaju stilove koji pripadaju generičkim selektorima. Na primjer specifičnost # ID1 izbornik je 0100.
U refactoringu, cilj je smanjiti specifičnost selektora (držati ih kratkim) koliko god je to moguće, kao što je moguće selektori s većom specifičnošću značajno smanjuju ponovnu uporabu selektora, i dovesti do nadutog koda baze.
Tri glavna tipa selektora visoke specifičnosti su:
- Kvalificirani selektori, kao što su
p.class1(definiranjepovdje je nepotrebno, jer onemogućuje korištenje iste klase s drugim HTML elementima) - Duboko ugniježđeni selektori, kao što su
.class1 .class2 .class3 .class4… - ID, kao što su
# ID1
Online alati, kao što je CSSDig spomenuto u koraku 1, mogu se koristiti za brzo pronalaženje selektora visoke specifičnosti. Također može biti korisno postaviti pravilo u vodiču za stil kodiranja o stvarima kao što je maksimalna razina gniježđenja ili ograničenje upotrebe iskaznica selektora.
8. Izbaci travu !važno pravila
CSS pravila koja slijede !važno izjava nadjačava regularna pravila stila. koristeći !važno pravila prije ili kasnije dovesti do nekoherentnog koda. Nije slučajnost da ih većina alata za označavanje označava kao pogrešku.
Kada moramo brzo napisati CSS, možemo se početi oslanjati na njih iako zbog njihove jednostavnosti.
Glavni problem s !važno deklaracije je da ako ih želimo nadjačati u budućnosti, moramo staviti još više !važno deklaracije u upotrebi, stoga je najbolje da ih uklonite gdje god je to moguće tijekom procesa refactoringa.
9. Očistite Magic brojeve i tvrde kodirane vrijednosti
Tijekom našeg svakodnevnog CSS-a, ponekad se susrećemo s problemima koje ne možemo riješiti i počinjemo koristiti tzv čarobne brojeve, vrijednosti koje djeluju iz nekih razloga, ali ne razumijemo zašto. Na primjer uzmite sljedeći primjer:
.class1 položaj: apsolutni; vrh: 28px; lijevo: 15,5%;
Glavni problem s čarobnim brojevima je da jesu sticajem okolnosti, i utjelovljuju “programiranje permutacijom” antiobrazac. Tijekom procesa refactoringa moramo ukloniti ta proizvoljna pravila iz našeg koda i zamijeniti ih razumnijim rješenjima gdje god je to moguće.
Isto pravilo vrijedi i za tvrde kodirane vrijednosti također. Vjerojatno najčešće pojavljivanje tvrdih kodiranih vrijednosti može se pronaći u pravilima visine retka:
/ * loše, morat ćemo dodati dodatna pravila fiksne visine u podređene elemente .class1 * / .class1 font-size: 20px; visina linije: 24px; / * dobro, fleksibilno pravilo visine linije može se sigurno koristiti i za dijete * / .class1 font-size: 20px; visina crte: 1,2;
Čvrsto kodirane vrijednosti čine naš kod manje otpornim na budućnost i rigidnijim, tako da ih kao dio refactoringa moramo kopati, i zamijenite ih fleksibilnim vrijednostima.
10. Jedinice i vrijednosti refaktora
Olakšati održavanje i otklanjanje pogrešaka u budućnosti, te izbjeći kvarove koji mogu nastati korištenjem različitih jedinica, kao što je em i px, istovremeno, moramo držati se koherentnih pravila o tome kako koristimo relativne i apsolutne vrijednosti.
Ako smo ih nekad dosljedno koristili u prošlosti, moramo ih pretvoriti u koncizan sustav
Ako koristimo previše sličnih boja na našoj web-lokaciji, to može biti i mudra stvar racionalizirati shemu boja smanjenjem broja boja koje koristimo. (Evo posta o tome kako na praktičan način odabrati shemu boja web-lokacije.)
