Kuidas Refactor CSS - A Guide

Kui soovime hallatavat ja optimeeritud koodialust, peab CSS-i refaktoratsioon olema esiplaani arendamise töövoo oluline osa. Kui me CSS-i tagasi lükkame, siis me meie olemasoleva koodi puhastamine ja ümberkorraldamine uusi funktsioone lisamata või vigu kinnitamata.

Refactoring aitab vältida CSS plahvatust, parandab koodi loetavust ja korduvkasutatavust, ja teeb CSS-i sujuvamaks ja kiiremaks.

Refaktooring on tavaliselt vajalik mõne aja pärast, sest isegi projektid, mis algasid lühidalt ja organiseeritud koodipõhiselt, hakkavad varem või hiljem kaotama oma selguse; ilmneb järjepidevus, vananenud reeglid ja korduvad koodiosad; ja me alustame ka stiilide ülekirjutamist ning kasutame üha rohkem häkke ja lahendusi.

Parim viis hoida meie CSS-koodi baasi hooldatavana on jääda “refaktoor varakult, refactor sageli” pöidlareegel. Selles postituses vaatame mõned näpunäited selle kohta, kuidas me saame teostada tõhusat CSS-i ümberkorraldamise protsessi.

1. Tehke esialgne audit

Parema pildi saamiseks selle kohta, mida me vajame refaktoriks, on see parim alustada põhjaliku auditiga, et näha, mida me praegu oleme.

Seal on palju häid online-tööriistu, mis võivad meid selles püüdluses aidata. CSSDig on võimas Chrome'i laiendus, mis analüüsib veebisaidi CSS-i ja uurib selle nõrkusi, nagu liiga spetsiifilised valijad või korduvad omadused.

Kasutamata CSS uurib kasutamata CSS-reegleid, samas kui linting-tööriistad, näiteks CSS Lint, võimaldavad kiiresti leida koostatavuse, hooldatavuse ja muud probleemid.

Samuti on oluline, et kood kontrollitaks käsitsi esialgse auditi käigus, kuna paljud arhitektuurilise tasandi probleemid on sellisel viisil püütud.

2. Seadistage hallatav kava

Töökoodi korrigeerimine on alati hirmutav ülesanne, kuid me saame leevendada valu, kui loome plaani selle kohta, mida me peame tegema, tükeldama refaktoriseerimisprotsessi juhitavateks tükkideks ja tegema teostatava ajakava.

CSS refactoringis on oluline asi, mida me alati peame arvestama: mõned asjad, mida me refakteerime, nt. valijate nimede muutmine teeb selle vajalike HTML- ja JavaScript-failide koodi kohandamiseks samuti.

Seetõttu on hea mõte jälgige neid täiendavaid muudatusi, mida me peame tegema, ja ehitada need meie refaktoriseerimise ajakavale koos esmaste, CSSiga seotud ülesannetega.

3. Jälgi arengut

Enne ümberehitamise alustamist on see oluline samm varundage meie esialgsed failid. Versioonikontrollisüsteemi (nt Git või Subversion) tutvustamine meie töövoogu võib samuti oluliselt parandada refaktoriseerimisprotsessi, kuna meil on registris tehtud järjestikuste sammude kohta ja me kui me tahame asju uuesti teha, saab ta tagasi eelmisele etapile.

4. Pange kinni kodeerimise stiili juhendist

Ühtne kodeerimisstiili juhend võib märkimisväärselt parandada koodide loetavust ja hooldatavust, nii et enne, kui hakkame refakteerima, on see oluline seadistage CSS kodeerimisstiili juhend.

Olulised asjad, mida otsustada, on järgmised:

• nimetamise konventsioonid
• vormindamise reeglid
• deklaratsiooni järjekorras
• üksused ja väärtused, mida me soovime kasutada
• kommenteerimise reeglid

Kui me ei soovi luua oma kodeerimisstiili juhendit, siis saame kasutada ka kellegi teise, näiteks ThinkUp'i, mis on saadaval Githubis.

Ei piisa, kui lihtsalt sisestada kodeerimisstiili juhend, peame ka seda tegema järgige koodi, kui me koodi ümber kirjutame ümberehitamise ajal ja oodata sama kõigilt teistelt kes töötab meie projektis.

5. Seadistage ühtne failistruktuur

Pärast ettevalmistustega valmisolekut tuleb kõigepealt luua õige CSS-failistruktuur, mis pöörab tähelepanu CSS-i kaskaadile..

See sõltub peamiselt projektist, kuidas meie faile kõige paremini korraldada, kuid on olemas mõned universaalsed reeglid, näiteks eraldi normalize.css CSS-i lähtestamise stiilide fail eraldi global.css globaalsete stiilide puhul, mida kasutatakse kogu projektis, ja salvestada kolmanda osapoole teegid eraldi kausta.

Kui me tahame oma CSS-failistruktuuriga turvaliselt mängida, on olemas ka valmis arhitektuurid, nagu SMACSS või ITCSS, mis pakuvad tõhusat tehnikat umbes kuidas korraldada CSS-faile skaleeritaval viisil.

6. Vabastage kasutamata ja korduvatest reeglitest

Mõne aja pärast hakkavad CSS-failid tavaliselt kasutamata reeglites rohkesti tundma, mida me peame identifitseerima ja puhastama refaktoriseerimise ajal. Meil on palju online-tööriistu uurida neid aegunud eeskirju, ja mõnikord lubame meil ka neid kiiresti kraavida.

Kõige tuntum vahend selleks on tõenäoliselt UncSS, Node.js moodul, mis võimaldab vabaneda kasutamata CSS-reeglitest kiiresti ja pakub ka keerukaid konfiguratsioonivõimalusi, mis muudavad puhastamise lihtsamaks..

Oluline on seda arvesse võtta ei pea tingimata kasutamata reegleid eemaldama kõik CSS-failid meil on, näiteks globaalsetest, lähtestamise või kolmanda osapoole stiililehtedest, nii et me peame seda tegema need välja jätta puhastamise ajal.

Koos vananenud reeglitega toovad topeltreeglid kaasa ka üleliigse koodi paistetuse ja tulemuslikkuse vähenemise. Me võime need eemaldada CSS Purge Node.js mooduli abil, kuid saame ka töötada CSS linters, et otsida topeltreegleid meie CSS-failides.

7. Vähendada spetsiifilisust

CSS-selektori spetsiifilisus arvutatakse sisemiste selektorite arvu ja tüüpide põhjal. CSS-spetsiifilisus on väljendatud neljakohalise numbrina, mida on kõige lihtsam mõista, kui vaatame seda visuaalset CSS-spetsiifilisuse kalkulaatorit:

Madalaim spetsiifilisus (0001) kuulub valijatesse, mis on suunatud ainult ühele üldisele HTML-elemendile, näiteks

või

. Mida rohkem sisemisi valikuid ühendivalik sisaldab, seda suurem on selle spetsiifilisus.

Teatud valikud, näiteks id või inline-stiilidest tulevatel valijatel on kõrgemad prioriteedid, kuna need on enam üldisematele valikutele omased stiilid. Näiteks. \ T # id1 valija on 0100.

Refaktoreerimisel on eesmärgiks vähendada valikute spetsiifilisust (hoida neid lühikesena) nii palju kui võimalik kõrgema spetsiifilisusega selektorid vähendavad selektiivi korduvkasutatavust oluliselt, ja kaasa tuua paisunud koodibaasi.

Kõrge spetsiifilisusega selektorite kolm peamist tüüpi on:

1. Kvalifitseeritud valikud, nagu näiteks p.class1 (määratleda lk silt ei ole siin vajalik, sest see muudab võimatuks sama klassi kasutada teiste HTML-elementidega)
2. Sügavalt sisestatud valikud, nagu näiteks .klass1. klass2. klass3 .klass4…
3. ID-d, nagu näiteks # id1

Nende kõrge spetsiifilisusega selektorite leidmiseks saab kiiresti kasutada veebipõhiseid tööriistu, nagu punktis 1 mainitud CSSDig. Samuti võib olla kasulik moodustada kood kodeerimisstiili juhendis asjade kohta, nagu näiteks pesitsemise maksimaalne tase või kasutamise piirang id selektorid.

8. Weed Out !oluline Reeglid

CSS reeglid, millele järgneb !oluline avaldus tühistab tavalise stiili reeglid. Kasutamine !oluline eeskirjad varem või hiljem tulemuseks on ebajärjekindel kood. See ei ole kokkusattumus, et enamik lintimisvahendeid tähistab neid veana.

Kui meil on vaja CSS-i kiiresti kirjutada, võime neid lihtsuse tõttu hakata toetuma.

Peamine probleem !oluline Kui me tahame neid tulevikus kõrvale jätta, peame me veelgi rohkem avaldama !oluline kasutatavad deklaratsioonid, seega on kõige parem neid uuesti välja töötada, kui see on võimalik refaktoriseerimise käigus.

9. Puhastage maagilised numbrid ja kõvad kodeeritud väärtused

Meie igapäevase CSS töövoo ajal satuvad me mõnikord probleemidele, mida me ei suuda lahendada, ja hakkame kasutama nn maagilised numbrid, väärtused, mis toimivad mõnel põhjusel, kuid me ei saa aru, miks. Näiteks võtke järgmine näide:

 .class1 positsioon: absoluutne; top: 28px; vasakule: 15,5%; 

Maagiliste numbrite peamine probleem on see, et nad on kaudsed, ja nad kehastavad “programmeerimine permutatsiooni abil” antipattern. Rekonstrueerimisprotsessi ajal peame need meelevaldsed reeglid meie koodist eemaldama ja asendama need mõistlikumate lahendustega, kus see on võimalik.

Sama rusikareegel kehtib kodeeritud väärtused samuti. Tõenäoliselt on kõvakoodiga väärtuste kõige sagedasem esinemine rea kõrguse reeglites:

 / * halb, peame lisama .class1 * / .class1 font-size: 20px; rea kõrgus: 24px;  / * hea, paindlikke joonekõrguse reegleid saab turvaliselt kasutada ka lapse elemendid * / .class1 font-size: 20px; joone kõrgus: 1,2; 

Kodeeritud väärtused muudavad meie koodi vähem tulevikukindlateks ja jäigemaks, nii et osana refakteerimisest peame neid kaevama ja asendada need paindlike väärtustega.

10. Refaktorite ühikud ja väärtused

Et hooldus ja silumine oleks tulevikus lihtsam, ning vältida vigu, mis võivad tuleneda erinevate üksuste kasutamisest, näiteks em ja px, samaaegselt peame järgima ühtset reeglit suhteliste ja absoluutsete väärtuste kasutamise kohta.

Kui me neid minevikus ebajärjekindlalt kasutasime, peame need muutma, et nad saaksid olla lühike süsteem

Kui kasutame meie saidil liiga palju sarnaseid värve, võib see olla ka tark värvisüsteemi ratsionaliseerida vähendades värvide arvu, mida me kasutame. (Siin on postitus selle kohta, kuidas valida veebisaidi värviskeemi praktikas.)