Ako na Refactor CSS - Sprievodca

Refaktorovanie CSS musí byť nevyhnutnou súčasťou workflow vývoja front-end, ak chceme spravovať a optimalizovať kódovú základňu. Keď sme refactor CSS, my vyčistiť a reorganizovať náš existujúci kód bez pridania nových funkcií alebo opravy chýb.

Refactoring pomáha zabrániť výbuchu CSS, zlepšuje čitateľnosť kódu a opätovnú použiteľnosť, a CSS zjednodušuje a rýchlejšie vykonávať.

Refactoring je zvyčajne potrebné po chvíli, pretože aj projekty, ktoré začali s stručnou a organizovanou kódom, skôr či neskôr začnú strácať svoju jasnosť; konzistentnosť, zastaralé pravidlá a duplicitné časti kódu; a tiež začneme prepisovať štýly a zamestnávame stále viac a viac problémov a riešení.

Najlepším spôsobom, ako udržať našu základňu kódu CSS udržiavateľnú, je držať sa “refactor predčasne, refactor často” pravidlo palca. V tomto príspevku sa pozrieme na niekoľko tipov o tom, ako môžeme uskutočniť efektívny proces refaktoringu CSS.

1. Vykonajte prvotný audit

Ak chcete mať lepší obraz o tom, čo potrebujeme na refaktor, je to najlepšie začnite komplexným auditom, aby ste zistili, čo v súčasnosti máme.

Existuje veľa skvelých online nástrojov, ktoré nám môžu pomôcť v tomto úsilí. CSSDig je výkonné rozšírenie prehliadača Chrome, ktoré analyzuje CSS webových stránok a skúma jeho slabé miesta, ako sú príliš špecifické selektory alebo opakujúce sa vlastnosti.

Nepoužité CSS prešetruje nepoužívané pravidlá CSS, zatiaľ čo nástroje na čistenie, ako je CSS Lint, umožňujú rýchlo nájsť kompatibilitu, udržiavateľnosť a ďalšie problémy.

Je tiež dôležité manuálne skontrolovať kód počas počiatočného auditu, pretože mnohé problémy na architektonickej úrovni môžu byť chytené iba týmto spôsobom.

2. Nastavte spravovateľný plán

Refactoring kód práce je vždy skľučujúca úloha, ale môžeme zmierniť bolesť, ak sme vytvoriť plán o tom, čo musíme urobiť, rozdeliť refactoring procesu na zvládnuteľné kusy, a urobiť realizovateľný rozvrh.

V refaktoringu CSS je dôležitá vec, ktorú vždy musíme brať do úvahy: niektoré veci, ktoré refaktorujeme, napr. zmena názvov voličov potrebné upraviť kód príslušných súborov HTML a JavaScript tiež.

Je preto dobrý nápad postupujte ďalej tieto ďalšie úpravy, ktoré budeme musieť vykonať, a stavať ich do nášho plánu refaktoringu spolu s primárnymi úlohami súvisiacimi s CSS.

3. Pokračovať v sledovaní

Pred začatím refaktoringu je to nevyhnutný krok zálohovať naše pôvodné súbory. Zavedenie systému na riadenie verzie, ako napríklad Git alebo Subversion, do nášho pracovného postupu tiež môže výrazne zlepšiť proces refaktorovania, pretože budeme mať register o postupných krokoch, ktoré sme vykonali, a my bude môcť vrátiť sa do predchádzajúcej etapy, ak chceme vrátiť veci späť.

4. Dodržujte príručku štýlu kódovania

Jednotný sprievodca štýlom kódovania môže pozoruhodne zlepšiť čitateľnosť a udržiavateľnosť kódu, takže predtým, než začneme refaktor, je nevyhnutné nastavte sprievodcu štýlom CSS kódovania.

Dôležité veci, o ktorých sa rozhodnete, sú:

menovacie konvencie
pravidlá formátovania
príkaz na vyhlásenie
jednotiek a hodnôt, ktoré chceme použiť
pravidlá komentovania

Ak nechceme vytvoriť vlastnú sprievodcu štýlom kódovania, môžeme použiť aj niekoho iného, napríklad ThinkUp, ktorý nájde na Github.

Nestačí len preto, aby sme zaviedli sprievodcu štýlom kódovania, ale tiež musíme držať sa pri prepísaní kódu počas refaktorovania a očakávajte to isté od všetkých ostatných ktorý pracuje na našom projekte.

5. Nastavte koherentnú štruktúru súborov

Keď sme pripravení s prípravami, prvá vec, ktorú musíme urobiť, je vytvoriť správnu štruktúru súborov CSS, ktorá venuje pozornosť kaskádovému charakteru CSS.

Závisí to hlavne na projekte, ako najlepšie usporiadať naše súbory, ale existujú určité univerzálne pravidlá, ako napríklad použitie samostatného súboru normalize.css súbor pre štýly obnovenia CSS, samostatný global.css pre globálne štýly, ktoré sa používajú v celom projekte a na ukladanie knižníc tretích strán do samostatnej zložky.

Ak chceme hrať bezpečne s našou štruktúrou súborov CSS, existujú aj hotové architektúry ako SMACSS alebo ITCSS, ktoré ponúkajú efektívne techniky týkajúce sa ako organizovať súbory CSS škálovateľným spôsobom.

6. Zbavte sa nepoužívaných a duplicitných pravidiel

Po chvíli sa súbory CSS zvyčajne začínajú opierať o nepoužívané pravidlá, ktoré potrebujeme identifikovať a vyčistiť počas refaktoringu. Existuje veľa online nástrojov, ktoré nám umožňujú preskúmať tieto zastarané pravidlá, a niekedy nám tiež dovoľuje rýchlo ich zbaviť.

Najznámejším nástrojom na tento účel je pravdepodobne UnCSS, modul Node.js, ktorý umožňuje rýchlo zbaviť nepoužívaných pravidiel CSS a poskytuje nám aj sofistikované možnosti konfigurácie, ktoré umožňujú ľahké vyladenie procesu čistenia.

Je dôležité vziať do úvahy, že my nemusíte nevyhnutne odstrániť nepoužívané pravidlá všetko súbory CSS, ktoré máme, napríklad z globálnych, obnovených alebo tretích straníckych štýlov, takže musíme vylúčiť ich počas čistenia.

Spolu s zastaranými pravidlami duplicitné pravidlá tiež vedú k nadbytočnému nadmernému kódovaniu a strate výkonu. Môžeme ich odstrániť pomocou modulu CSS Purge Node.js, ale môžeme s nimi pracovať CSS linters s cieľom hľadať duplicitné pravidlá v našich súboroch CSS.

7. Znížte špecifickosť

Špecifickosť selektora CSS sa vypočíta z počtu a typov vnútorných voličov, ktoré obsahuje. Špecifickosť CSS je vyjadrená ako štvorciferné číslo, ktoré je najjednoduchšie pochopiť, ak skontrolujeme túto vizuálnu kalkulačku CSS špecifikácie:

Najnižšia špecifickosť (0001) patrí k selektorom, ktoré sa zameriavajú len na jeden všeobecný prvok HTML, ako napríklad

alebo

. Čím viac vnútorných selektorov obsahuje zložený selektor, tým vyššia je jeho špecifičnosť.

Niektoré voliče, ako napr id alebo výberové prvky, ktoré prichádzajú z inline štýlov, majú vyššie priority, pretože prepisujú štýly, ktoré patria k všeobecnejším výberom. Napríklad špecifickosť # ID1 selektor je 0100.

Pri refaktoringu je cieľom znížiť špecifickosť selektorov (udržiavať ich krátke), pokiaľ je to možné, pretože selektory s vyššou špecifickosťou výrazne znižujú využiteľnosť voliča, a vedie k nafúknutiu kódu.

Tri hlavné typy selektorov s vysokou špecifikáciou sú:

Kvalifikovaní selektorov, ako napr p.class1 (definovanie p značka nie je potrebná, pretože znemožňuje používať rovnakú triedu s inými prvkami HTML)
Hlboko vstavané voliče, ako napr .class1 .class2 .class3 .class4 ...
ID, ako napr # ID1

Online nástroje, ako CSSDig uvedené v kroku 1, môžu byť použité na rýchle vyhľadanie týchto selektorov s vysokou špecifikáciou. Môže byť tiež užitočné nastaviť pravidlo v príručke štýlu kódovania o veciach, ako je maximálna úroveň vnorenia alebo obmedzenie používania id selektory.

8. Weed Out `!dôležitý` pravidlá

Pravidlá CSS, po ktorých nasleduje !dôležitý vyhlásenie prepisuje pravidlá pravidelného štýlu. Použitím !dôležitý skôr alebo neskôr vedú k nekoherentnému kódu. Nie je to náhoda, že väčšina nástrojov na lintovanie ich označuje ako chybu.

Keď potrebujeme písať CSS rýchlo, môžeme sa na ne začať spoľahnúť aj preto, lebo ich jednoduchosť.

Hlavný problém s !dôležitý deklarácie je, že ak ich chceme v budúcnosti prepísať, musíme ich ešte viac !dôležitý používaných vyhlásení, preto je najlepšie ich odstrániť tam, kde je to možné počas refaktoringu.

9. Vyčistiť čarovné čísla a tvrdé kódované hodnoty

Počas nášho každodenného pracovného postupu CSS niekedy narazíme na problémy, ktoré nemôžeme vyriešiť, a začneme používať tzv magické čísla, hodnoty, ktoré fungujú z niektorých dôvodov, ale nerozumieme prečo. Napríklad nasledujúci príklad:

 .class1 pozícia: absolútna; top: 28px; vľavo: 15,5%;

Hlavným problémom s magickými číslami je to, že sú náhodný, a stelesňujú “programovanie pomocou permutácie” návrhový antivzor. Počas procesu refaktoringu je potrebné odstrániť tieto ľubovoľné pravidlá z nášho kódu a nahradiť ich rozumnejšími riešeniami tam, kde je to možné.

Platí to isté pravidlo hard-kódované hodnoty tiež. Pravdepodobne najčastejší výskyt hard-kódovaných hodnôt možno nájsť v pravidlách výškových riadkov:

 / * zlý, budeme musieť pridať ďalšie pravidlá pevnej línie výšky k podriadeným prvkom .class1 * / .class1 font-size: 20px; line-height: 24px;  / * good, flexibilné pravidlo line-height môže byť bezpečne použité aj podradenými prvkami * / .class1 font-size: 20px; výška výšky: 1,2;

Pevne zakódované hodnoty robia z nášho kódu menej odolné voči budúcnosti a prísnejšie, takže ako súčasť refaktoringu ich musíme vykopať a nahraďte ich flexibilnými hodnotami.

10. Reaktorové jednotky a hodnoty

Aby sa údržba a ladenie uľahčili v budúcnosti, a aby sa predišlo poruchám, ktoré môžu vyplývať z používania rôznych jednotiek, ako napr em a px, súčasne, musíme dodržiavať koherentné pravidlá o tom, ako používame relatívne a absolútne hodnoty.

Ak sme ich v minulosti používali nekonzistentne, musíme ich previesť tak, aby mohli predstavovať stručný systém

Ak na našich stránkach použijeme príliš veľa podobných farieb, môže to byť aj múdre racionalizovať farebnú schému znížením počtu farieb, ktoré používame. (Tu je príspevok o tom, ako prakticky zvoliť farebnú schému webových stránok.)