Jak Refactor CSS - průvodce
Pokud chceme mít zvládnutelnou a optimalizovanou kódovou základnu, musí být CSS refactoring nezbytnou součástí vývojového postupu frontendu. Když jsme refactor CSS, my vyčistit a reorganizovat náš existující kód bez přidání nových funkcí nebo oprav chyb.
Refactoring pomáhá zabrání explozi CSS, zlepší čitelnost kódu a znovu použitelnost, a dělá CSS elegantnější a rychlejší.
Refactoring je obvykle potřebný po chvíli, protože i projekty, které začaly se stručným a organizovaným kódovým základem dříve nebo později, začnou ztrácet svou jasnost; konzistence, zastaralá pravidla a duplicitní kódové části; a také začneme přepisovat styly a zaměstnávat stále více a více hacků a řešení.
Nejlepším způsobem, jak udržet naši CSS kódovou základnu, je držet se “refactor brzy, často refactor” pravidlo. V tomto příspěvku se podíváme na několik tipů, jak můžeme provést efektivní proces refaktoringu CSS.
1. Proveďte počáteční audit
Chcete-li mít lepší představu o tom, co potřebujeme k refaktoru, je to nejlepší začněte s komplexním auditem a zjistěte, co v současné době máme.
Existuje mnoho skvělých online nástrojů, které nám mohou v tomto úsilí pomoci. CSSDig je výkonné rozšíření Chrome, které analyzuje CSS webu a prozkoumá jeho slabiny, jako jsou příliš specifické selektory nebo opakované vlastnosti..
Nevyužité CSS zkoumá nepoužívaná pravidla CSS, zatímco nástroje pro lemování, jako je například CSS Lint, umožňují rychle najít kompatibilitu, udržovatelnost a další problémy..
Je také důležité ručně kontrolovat kód během úvodního auditu, protože mnoho problémů na architektonické úrovni lze zachytit pouze tímto způsobem.
2. Nastavte spravovatelný plán
Refactoring pracovního kódu je vždy skličující úkol, ale my můžeme zmírnit bolest, pokud vytvoříme plán o tom, co musíme udělat, rozřezat proces refactoringu na zvládnutelné kousky a udělat vhodný plán.
V CSS refactoring je důležitá věc, kterou musíme vždy vzít v úvahu: některé věci, které refaktorujeme, např. změnou názvů voličů nutné upravit kód příslušných souborů HTML a JavaScript také.
Proto je dobrý nápad sledujeme tyto dodatečné úpravy, které budeme muset provést, a sestavit je do našeho plánu refaktoringu spolu s primárními úkoly souvisejícími s CSS.
3. Sledování pokroku
Než se pustíme do refaktoringu, je to nezbytný krok zálohovat naše počáteční soubory. Zavedení systému řízení verzí, jako je Git nebo Subversion, do našeho pracovního postupu může také výrazně zlepšit proces refactoring, protože budeme mít registr o postupných krocích, které jsme podnikli, a my Budeme se moci vrátit do předchozí fáze, pokud chceme věci změnit.
4. Držte se Průvodce kódováním stylů
Koherentní průvodce stylem kódování může pozoruhodně zlepšit čitelnost kódu a udržovatelnost, takže než začneme refaktorovat, je to nezbytné nastavit průvodce stylem kódování CSS.
Důležité věci, o kterých je třeba rozhodnout, jsou:
- konvence
- pravidla formátování
- objednávky
- jednotky a hodnoty, které chceme použít
- pravidla pro komentování
Pokud nechceme vytvářet vlastní průvodce stylem kódování, můžeme použít i někoho jiného, například ThinkUp, který lze nalézt na Githubu.
Nestačí však jen představit průvodce stylem kódování, musíme také držet se ho, když kód přepíšeme během refaktoringu a očekávat totéž od všech ostatních který pracuje na našem projektu.
5. Nastavte koherentní strukturu souborů
Poté, co jsme s přípravami připraveni, musíme udělat první řádnou strukturu souborů CSS, která věnuje pozornost kaskádové povaze CSS.
Záleží především na projektu, jak nejlépe organizovat naše soubory, ale existují některá univerzální pravidla, jako například použití samostatných souborů normalize.css soubor pro styly resetu CSS, samostatný global.css pro globální styly, které se používají v celém projektu, a pro ukládání knihoven třetích stran do samostatné složky.
Pokud chceme s naší strukturou souborů CSS hrát bezpečně, existují také připravené architektury, jako jsou SMACSS nebo ITCSS, které nabízejí efektivní techniky jak organizovat soubory CSS škálovatelným způsobem.
6. Zbavte se nepoužívaných a duplikovaných pravidel
Po chvíli se soubory CSS obvykle začnou hojit v nepoužitých pravidlech, která potřebujeme během refaktoringu identifikovat a vyčistit. Existuje mnoho online nástrojů, které nám umožňují přezkoumá tato zastaraná pravidla, a někdy nám také dovolují rychle přejít.
Nejznámějším nástrojem pro tento účel je pravděpodobně UnCSS, modul Node.js, který umožňuje rychle se zbavit nepoužívaných pravidel CSS a poskytuje nám také sofistikované možnosti konfigurace, které usnadňují vyladění procesu čištění..
Je důležité vzít v úvahu, že my nemusíte nutně odstraňovat nepoužívaná pravidla Všechno CSS soubory, které máme, například z globálních, resetovacích nebo stylových listů třetích stran, takže je třeba vyloučit při provádění čištění.
Spolu se zastaralými pravidly vedou duplicitní pravidla k nadbytečnému kódu a ztrátě výkonu. Můžeme je odstranit pomocí modulu CSS Purge Node.js, ale také s ním můžeme pracovat CSS linters za účelem hledání duplicitních pravidel v našich souborech CSS.
7. Snížení specifičnosti
Specifičnost CSS selektoru je vypočtena z počtu a typů vnitřních selektorů, které obsahuje. Specifičnost CSS je vyjádřena jako čtyřmístné číslo, které je nejsnáze pochopitelné, pokud se podíváme na tuto vizuální kalkulačku specifických CSS:
Nejnižší specificita (0001) patří k selektorům, které cílí pouze na jeden obecný prvek HTML, jako je například nebo . Čím více vnitřních selektorů obsahuje selektor sloučenin, tím vyšší je jeho specificita.
Určité selektory, jako např id nebo selektory pocházející z inline stylů, mají vyšší priority, protože potlačují styly patřící k obecnějším selektorům. Například specifičnost # id1 je volič 0100.
V refaktoringu je cílem snížit specifičnost selektorů (udržet je krátká) tak, jak je to možné, jak je to možné selektory s vyšší specificitou významně snižují opakovatelnost selektoru, a vést k nadýmání kódu.
Tři hlavní typy selektorů s vysokou specificitou jsou:
- Kvalifikované selektory, jako
p.class1(definovánístrnení nutná, protože znemožňuje použití stejné třídy s jinými prvky HTML) - Hluboce vnořené voliče, jako
.class1 .class2 .class3 .class4… - ID, jako
# id1
Online nástroje, jako CSSDig zmíněné v kroku 1, mohou být použity k rychlému nalezení těchto selektorů s vysokou specificitou. Může být také užitečné nastavit pravidlo v průvodci stylem kódování o věcech, jako je maximální úroveň vnoření nebo omezení použití id voliče.
8. Plevel !Důležité Pravidla
Pravidla CSS následovaná pravidly !Důležité příkaz přepíše pravidla pravidelného stylu. Použitím !Důležité dříve nebo později vést k nekoherentnímu kódu. Není to náhoda, že většina nástrojů na ořezávání je označuje jako chybu.
Když potřebujeme rychle psát CSS, můžeme se na ně začít spoléhat kvůli jejich jednoduchosti.
Hlavní problém s !Důležité prohlášení, že chceme-li je v budoucnu potlačit, musíme ještě více !Důležité Používání deklarací, takže je nejlepší je vymýtit kdekoli je to možné během procesu refactoring.
9. Vyčištění čísel kouzla a tvrdých kódovaných hodnot
Během našeho každodenního pracovního postupu CSS někdy narazíme na problémy, které nemůžeme vyřešit, a začneme používat takzvané magická čísla, hodnoty, které fungují z nějakých důvodů, ale nechápeme proč. Například následující příklad:
.class1 pozice: absolutní; top: 28px; vlevo: 15,5%;
Hlavní problém s magickými čísly je, že jsou okolnosti, a ztělesňují “programování permutací” antipattern. Během procesu refaktoringu musíme z našeho kódu odstranit tato libovolná pravidla a nahradit je vhodnějšími řešeními tam, kde je to možné..
Stejné pravidlo platí pevné hodnoty také. Pravděpodobně nejčastější výskyt pevně zakódovaných hodnot lze nalézt v pravidlech výšky řádků:
/ * špatné, budeme muset přidat další pravidla pevné výšky řádku na podřízené prvky .class1 * / .class1 velikost písma: 20px; výška řádku: 24px; / * good, flexibilní pravidlo výšky řádku může být bezpečně použito také podřízenými elementy * / .class1 font-size: 20px; výška čáry: 1,2;
Hodnoty s pevným kódem způsobují, že náš kód je méně odolný vůči budoucím funkcím a pevnější, takže v rámci refaktoringu je musíme kopírovat a nahradit je pružnými hodnotami.
10. Refaktorové jednotky a hodnoty
Ulehčit údržbu a ladění v budoucnu a vyhnout se poruchám, které mohou vyplynout z používání různých jednotek, jako je například em a px, zároveň musíme držet se soudržných pravidel o tom, jak používáme relativní a absolutní hodnoty.
Pokud bychom je v minulosti používali nedůsledně, musíme je převést tak, aby mohly představovat výstižný systém
Pokud na našich stránkách používáme příliš mnoho podobných barev, může to být také moudrá věc racionalizovat barevné schéma snížením počtu použitých barev. (Zde je příspěvek o tom, jak vybrat barevné schéma webu praktickým způsobem.)
