Webdesign

CSS audit: Jak na podrobné přezkoumání kódu?

22. ledna 2015

•

Většina lidí není příliš nadšena představou, že se jim bude někdo hrabat v kódu. Přesto je audit css kódu jedním z mých nejoblíbenějších typů projektů. CSS audit je opravdová detektivní práce. Vezmete kód webu a začnete v něm pátrat. Díváte se, kolik stylových předpisů se volá. Jak to ovlivňuje výkon webu. A samozřejmě vá s zajímá, jak je samotný CSS napsaný. Cílem je hledat způsoby, jimiž by šlo vylepšit stávající stav — vypátrat a vyřešit nedostatky tak, abyste zlepšili kódovou základnu a web zrychlili.

Nyní se s vámi podělíme o tipy, jak přistoupit k vlastnímu auditu. Jaké přednosti získáte, když zapojíte veškerý inventář CSS a různé nástroje.

Jaké benefity přináší audit

Audit pomáhá lépe uspořádat kód a eliminovat v něm duplicity. Během auditu nemusíte psát žádný kód; prostě jen podrobně zkoumáte stávající stav a dokumentujete doporučení, která předložíte klientovi nebo prodiskutujete se svým týmem. Tato doporučení zajistí, že se v novém kódu nebudou opakovat minulé chyby. Podívejme se teď důkladněji na další benefity:

Redukuje se velikost souborů

Díky kompletnímu přehledu CSS získáte čas na to, abyste našli způsoby, jak kód refaktorovat: [1] vyčistit ho a možná i zredukovat počet vlastností. Můžete se také pokusit vymýtit různé relikty a harampádí, jako jsou zastaralé verze prohlížečových prefixů, které už vůbec nikdo nepoužívá. Když se zbavíte nepoužívaného nebo nadbytečného kódu, snížíte velikost souboru, který musejí lidé stahovat při navštěvě vašeho webu.

Zajistí se soulad se směrnicemi

Během auditu vytvářejte dokumentaci o stylech a co se děje s webem či aplikací. Můžete vyrobit formální knihovnu vzorů pro styly (style guide neboli pattern library) nebo prostě jen zapisovat svá doporučení, abyste zaznamenali, jak se používají jednotlivé části kódu. Ať už bude mít dokumentace jakoukoli formu, těm, kdo přicházejí do vašeho týmu, ušetří spoustu času i potíží. Nyní se budou moci snadno důvěrně seznámit s CSS i s architekturou vašeho webu.

Standardizuje se kód

Na způsoby, jak organizovat kód, existují různé názory. Dodržovat zvolený standard je důležité, pokud má být v budoucnu kódová základna lépe udržovatelná. Pokud například zvolíte, že uspořádáte vlastnosti podle abecedy, snadno si všimnete duplicit, protože skončíte se dvěma sadami vlastností margin nacházejících se těsně vedle sebe. Možná raději uspořádáváte vlastnosti do skupin podle jejich funkce: pozicovací, vztahující se k modelu boxu, atd. Chránit před duplicitami ale pomůže jakýkoli systém, který zavedete.

Zvyšuje se výkon

To nejlepší jsme si nechali na konec. Audit kódu spolu s kombinováním a komprimováním stylových předpisů vede u webů na znatelné zvýšení rychlostí. Například, Harry Roberts, front-endový architekt ve Velké Británii, který vede pravidelně audity, mi pověděl o jednom webu, na kterém nedávno pracoval:

Přebudoval jsem web Fasetto.com se záměrem vylepšit jeho výkon; jeho původních dvacet sedm separátních stylových předpisů pro jednostránkový web (hlavně toolkity uživatelského rozhraní jako je Bootstrap, atd.) jsem srazil na jediný stylový předpis (který je skutečně zmenšený a inline, aby se ušetřil HTTP požadavek), který po gzip váží pouhých 5.4 kB.

To je obrovské vítězství, zejména pro lidi na pomalejších připojeních — když se ale weby načítají rychle, těží z toho všichni.

Jak postupovat při auditu CSS kódu?

Když teď audity získaly vaši přízeň, jak se vlastně takový audit udělá? Já s oblibou začínám s několika málo nástroji, které poskytují přehled o stávající kódové základně webu. Ke svému auditu však můžete přistoupit jinak, podle toho, které oblasti vašeho webu působí nějaké potíže, nebo podle jaké filozofie píšete svůj kód (buď OOCSS, nebo BEM). Důležité je brát v úvahu, co asi tak bude pro vás a váš web nejužitečnější.

Poté, co jste pomocí zvolených nástrojů povšechně diagnostikovali kód, zkoumám ho řádek po řádku.

Spolehlivé nástroje v CSS auditu

Type-o-matic

První nástroj, po kterém sahám, je neocenitelný Type-o-matic Nicole Sullivanové. Je to doplněk do nástroje Firebug, který generuje JSON report všech stylových typů, které se používají v rámci daného webu. Jako bonus navíc vytvoří Type-o-matic při svém běhu vizuální report. Když si prohlédnete oba reporty, vidíte ihned, kde byste mohli zkombinovat styly, které jsou si velmi podobné, čímž eliminujete nadbytečné styly. Zjistila jsem, že díky podrobnostem uváděným v JSON reportu snadno vidíte, jak byste mohli vytvořit lépe opětovně využitelný systém typů.

CSS Lint

Kromě nástroje Type-o-matic spouštím také CSS Lint, nesmírně flexibilní nástroj, který označkuje širokou škálu potenciálních chyb. Od chybějících náhradních barev až po zkrácené zápisy vlastností pro lepší výkon. CSS Lint se používá tak, že kliknete na šipku vedle slova “Lint” a zaškrtnete volby, které chcete testovat. Já ráda kontroluji opakující se vlastnosti a příliš mnoho velikostí fontů, takže vždy současně zaškrtávám položky v sekcích Maintainability & Duplication a Performance.

CSS Lint pak vrátí doporučení, co by se mělo změnit. Něco se může vztahovat k už známým záležitostem, které selhávají ve starších prohlížečích. Jiné mohou nabízet nejlepší praktiky (alespoň jako takové je nástroj vidí). CSS Lint není dokonalý. Pokud ho spustíte tak, že ponecháte zaškrtnutá úplně všechna políčka, téměř s jistotou uvidíte v konečném reportu věci, s nimiž možná nebudete souhlasit. Například upozornění pro IE6. Dá se říci, že to je prostě rychlý způsob, jak zjistíte všeobecný stav vašeho CSS.

Objevování opakujících se vlastností

Poté projdu CSS, abych prověřila, jak často se opakují běžné vlastnosti, jako jsou float nebo margin. (Pokud si tykáte s příkazovým řádkem, napište grep spolu s patřičnými instrukcemi pro něj a zapojte do práce něco jako grep “float” styles/styles.scss, abyste zjistili všechny výskyty “float”.) Poznamenejte si všechny vlastnosti, které budete možná moci vyjmout nebo dát do jiných modulů. Prořezávání vlastností je vždy něco za něco: pokud chcete zredukovat počet opakujících se vlastností, možná budete muset do svého HTML přidat více tříd. Je to třeba posuzovat podle potřeb konkrétního projektu.

Já s oblibou dělám tento krok ručně, protože mě to nutí, abych sama pomalu prošla celý CSS. To mi pomáhá lépe pochopit, co se v něm přesně děje. Pokud však jste v časové tísni, nebo se na příkazovém řádku necítíte jako doma, mohou vám pomoci tyto nástroje:

CSS Dig je automatizovaný skript, který projde veškerý kód, vizualizuje ho a pomáhá s refaktorací. Obdobným nástrojem je StyleStats, do něhož napíšete url, jejíž CSS chcete posoudit.
CSS Colorguard je zbrusu nový nástroj, který běží na Node a jeho výstupem je report založený na barvách, které používáte, takže se dozvíte, které barvy jsou až příliš podobné. Pomáhá omezit na rozumnou míru paletu barev, aby se v budoucnu snadněji udržovala.
Dust-Me Selectors je doplněk pro Firebug ve Firefoxu, který najde nepoužívané selektory.

Řádek po řádku

Poté, co jste nechali proběhnout vybrané nástroje, nastal čas pročítat CSS; vyplatí se získat představu o tom, co se kde doopravdy děje. Například komentáře v kódu — nástroje je opomíjejí — mohou vysvětlit, proč v kódu stále přetrvává nějaká výstřednost. Zásadní věc, kterou kontroluji zvlášť pečlivě, je hloubka platnosti (depth of applicability), neboli jak daleko (hluboko) se nějaký atribut aplikuje. Spoléhá se váš CSS na spoustu všelijakých specifik? Vidíte dlouhé řetězce selektorů, buď v samotných souborech stylů, nebo ve výstupu z preprocesoru? Vysoká hloubka platnosti znamená, že aby styly fungovaly, bude kód požadovat velmi specifickou HTML strukturu. Pokud se vám podaří hloubku platnosti snížit, odměnou bude lépe opětovně využitelný kód i rychlejší výkon.

Revize a doporučení

Teprve teď to začne být zábavné. Nyní máte po kupě všechna potřebná data. Můžete začít zjišťovat, jak byste mohli vylepšit CSS a sepsat patřičná doporučení.

Dokument s doporučeními nemusí být nějak designérsky vyšperkovaný či umně naformátovaný. Měl by být především snadno čitelný. Dobrý nápad je rozdělit ho na dvě části. V první bude revize, soupis věcí, které jste zjistili. Pokud se budete odkazovat na výsledky z CSS Lint nebo Type-o-matic, nezapomeňte připojit jako přílohu buď snímky obrazovek, nebo samotný JSON report. Druhá polovina dokumentu bude obsahovat proveditelná doporučení na vylepšení kódu. Mohou být docela prostá, například seznam položek jako je “Slučujte typové styly, které jsou úzce provázané, a vytvářejte mixiny použitelné na úrovni celého webu.”

Až zanalyzujete veškeré informace, které jste nashromáždili, hledejte oblasti, v nichž můžete:

Utužit kód

Máte pro nějaký call-out box [2] čtyři různé sady stylů, několik podobných stylů pro hypertextové odkazy, nebo příliš mnoho výjimek ze standardní mřížky? To všechno jsou skvělí kandidáti na opakovatelné modulární styly. Aby byla konsolidace ještě snazší, využijte nějaký preprocesor, jako například Sass, a přeměňte je na mixiny nebo extendy, což umožní aplikovat styly, když je voláte na nějaké třídě. (Jen zkontrolujte, zda je výstupní kód rozumný a účelný.)

Udržet kód konsistentní

Dobrý audit zajistí, že kód bude dodržovat svou vlastní filozofii. Pokud je CSS napsaný na základě nějakého konkrétního přístupu, například BEM, nebo OOCSS, je takto konzistentní? Nebo se styly čas od času pozměňují a existují jisté přijatelné odchylky? Nezapomeňte tyto výjimky zdokumentovat, aby si jich ostatní členové týmu byli vědomi.

Pokud pracujete s klienty, je také důležité vysvětlit jim přístupy, které preferujete, aby pochopili, kdo jste a odkud pocházíte — a které záležitosti v kódu považujete za možné zdroje potíží. Já například preferuji OOCSS, takže mívám sklon agitovat pro větší modularitu a opětovnou využitelnost; několik tříd naskládaných na sobě (pokud nepoužíváte preprocesor) mě netrápí. Zajistit, aby klienti dobře chápali kontext vaší práce, je obzvlášť důležité, pokud nejste v implementačním týmu.

Předáváme výsledky auditu klientům

Máte to! Poté, co jste sepsali svá doporučení (předtím ale věnovali dost času na to, abyste si je rozmysleli, takže jste si jisti, že sedí), předejte je klientům — a buďte připraveni na jakékoli dotazy, které mohou mít. Pokud to dopadlo dobře, gratuluji: nic neodkládejte a hned pusťte do svého seznamu.

Ještě moment — audit vás odmění i jinak. Teď, když máte primární dokumentaci, trochu ji rozpracujte. Použijte ji jako odrazový můstek pro rozhovory o tom, jak byste v budoucnu měli udržovat CSS. Pokud se na různých místech kódu objevovaly stále stejné nedostatky, zdokumentujte, jak jste je vyřešili. Všichni budou v budoucnu vědět, jak hodláte postupovat, až budete vytvářet nové schopnosti nebo sekce. Mohli byste také svůj dokument přeměnit na knihovnu vzorů pro styly (style guide). Měli byste si také rozmyslet, jak často byste se měli ke svému auditu vracet, abyste zajistili, že vaše kódová základna stále zůstává čisťounká jako lilie. Správné časování sice závisí na týmu i projektu, přesto si raději připravte realistický, pravidelný plán — je to klíčová část auditového procesu.

Shrnutí

Provést audit je nezbytný první krok, chcete-li udržet CSS ve skvělé kondici. Pomáhá také, aby byla dokumentace stále aktuální, takže s její pomocí bude tým vždycky vědět, jak pokračovat dál, a jak na to, když se pustí do tvorby nových schopností. Když máte kód dobře strukturovaný, je výkonnější — z čehož těží úplně všichni. Najděte si čas, zapněte své malé šedé mozkové buňky a začněte pátrat.

Informace o autorce

Susan Robertson

Susan Robertsonová se v roce 2005 zamilovala do kódu a od té doby až doposud s potěšením píše značkování a CSS. Pracuje s týmy všech velikostí, přímo miluje být uprostřed designu mezi vývojáři a kódovat věci, které jsou krásné, srozumitelné a plné výzev. V poslední době spolupracovala s týmem Editorially, momentálně je na volné noze.

[1] Refaktorace jsou drobné změny v kódu, které zkvalitňují jeho vnitřní strukturu, nemění vnější chování. Kód je pak čistší, lépe čitelný a lépe škálovatelný. Protože jsou změny drobné, minimalizuje se také riziko vnášení nových chyb.

[2] Vysvětlivka doprovázená šipkou či jinou drobnou grafikou, krátký zvýrazněný text, který má přitáhnout pozornost čtenáře, apod.