4 Orodja za preverjanje in optimiziranje CSS
Ko vaša spletna stran začne rasti, bo tudi vaša koda. Ker se koda širi, lahko CSS nenadoma postane težko vzdrževati in lahko na koncu prepišete eno pravilo CSS z drugim. To zaplete stvari in verjetno boste imeli veliko hroščev.
Če se vam to dogaja, je čas za vas preglejte CSS vašega spletnega mesta. Revizija CSS-ja vam bo omogočila, da določite dele CSS-ja, ki niso optimizirane. Datoteko slogovne datoteke lahko zmanjšate tudi tako, da odstranite vrstice kode, ki upočasnjuje učinkovitost vašega spletnega mesta.
Tu je 5 dobrih orodij, ki vam bodo pomagala pri reviziji in optimizaciji CSS.
Tip-o-matic
Tip-o-matic je vtičnik Firebug za analizo pisav, ki se uporabljajo na spletnem mestu. Ta vtičnik poda vizualno poročilo v tabeli, ki vsebuje lastnosti pisave, kot so družina pisav, velikost, teža, barva in tudi, kolikokrat je pisava uporabljena na spletni strani. S pomočjo tabele s poročili lahko preprosto optimizirate uporabo pisave, odstranite tisto, kar je nepotrebno, ali združite sloge, ki so preveč podobni.
CSS Lint
CSS Lint je linting orodje, ki analizira sintakso CSS na podlagi specifičnih parametrov, ki naslavljajo uspešnost, dostopnost in združljivost vašega CSS-ja. Presenečeni boste nad rezultati, pričakujete veliko opozoril v vašem CSS-ju. Vendar bodo te napake sčasoma pomagale popraviti sintakso CSS in jo narediti učinkovitejše. Poleg tega boste tudi boljši pisatelj CSS.
CSS ColorGuard
CSS ColorGuard je relativno novo orodje. Zgrajen je kot modul Node in deluje na vseh platformah: Windows, OS X in Linux. CSS ColorGuard je orodje ukazne vrstice, ki vas bo obvestilo, če uporabljate podobne barve v slogovnem slogu; npr. # f3f3f3
je zelo blizu # f4f4f4
, tako da boste morda želeli razmisliti o združitvi obeh. CSS ColorGuard je nastavljiv, nastavite lahko prag podobnosti in nastavite barve, ki jih želite orodje prezreti.
Kopiranje CSS
Kopiranje CSS je skript Python in deluje lokalno na vašem računalniku. CSS Dig bo izvedel temeljito preiskavo v vašem CSS. Bral bo in združeval lastnosti, npr. vse deklaracije o barvi ozadja bodo potekale pod odsekom ozadja. Na ta način lahko preprosto sprejemate odločitve na podlagi poročila, ko skušate standardizirati sintakso CSS, npr. barve lahko najdete v različnih slogih z naslednjo deklaracijo barv.
barva: #ccc; barva: #cccccc; barva: #CCC; barva: #CCCCCC;
Te barvne deklaracije delajo isto stvar. Lahko greš z #ccc
ali s kapitalom #CCC
kot standard. CSS Dig lahko razkrije to redundanco tudi za druge lastnosti CSS, tako da bo vaša koda lahko bolj dosledna.