4 Kontrollimise ja optimeerimise tööriistad

Kui teie veebileht hakkab kasvama, siis ka teie kood. Kuna teie kood laieneb, võib CSS järsult muutuda raskeks, ja võib-olla võite ühe CSS-reegli üle kirjutada. See raskendab asju ja tõenäoliselt jõuad palju vigu.

Kui see sulle juhtub, siis on aeg auditeerida saidi CSS-i. CSS-i auditeerimine võimaldab teil tuvastada teie CSS-i osi, mida pole optimeeritud. Võite ka stiilitabeli failide arvu vähendada, kõrvaldades koodijooned, mis aeglustavad teie saidi toimivust.

Siin on 5 head tööriista, mis aitavad teil CSS-i auditeerida ja optimeerida.

Tüüp-o-matic

Tüüp-o-matic on Firebug plugin, et analüüsida veebisaidil kasutatavaid fonte. See plugin annab visuaalse aruande tabelis, millel on fondi omadused, näiteks fontide perekond, suurus, kaal, värv ja samuti, kui mitu korda on veebilehte font. Aruandetabeli kaudu saate hõlpsasti optimeerida fondi kasutamist, eemaldada mittevajalikud või kombineerida liiga sarnased stiilid.

CSS Lint

CSS Lint on lintimine tööriist, mis analüüsib CSS-i süntaksit konkreetsete parameetrite alusel, mis tegelevad teie CSS-i jõudluse, kättesaadavuse ja ühilduvusega. Sa oleksid tulemustega üllatunud, oodata palju CSS-i hoiatusi. Kuid need vead aitavad lõpuks CSS-i süntaksit parandada ja muuta see tõhusamaks. Lisaks on teil ka parem CSS-kirjanik.

CSS ColorGuard

CSS ColorGuard on suhteliselt uus vahend. See on ehitatud sõlme moodulina ja see töötab kõikidel platvormidel: Windows, OS X ja Linux. CSS ColorGuard on käsurea tööriist, mis teavitab teid, kui kasutate oma töölehel sarnaseid värve; nt. # f3f3f3 on päris lähedal # f4f4f4, seega võiksite kaaluda nende ühendamist. CSS ColorGuard on konfigureeritav, saate seada sarnasuse künnise ja määrata värvid, mida soovite tööriista ignoreerida.

CSS Dig

CSS Dig on Pythoni skript ja töötab teie arvutis. CSS Dig kontrollib teie CSS-is põhjalikult. See loeb ja kombineerib nt. kõik taustavärvi deklaratsioonid lähevad taustalõigu alla. Nii saate CSS-i süntaksite standardiseerimisel, nt. värvi võib leida erinevate stiilide vahel järgmise värvusdeklaratsiooniga.

 värv: #ccc; värv: #cccccc; värv: #CCC; värv: #CCCCCC; 

Need värvitoonid teevad sama. Võib ka minna #ccc või pealinnaga #CCC standardina. CSS Dig võib avaldada selle redundantsuse ka teistele CSS-i omadustele ning te saate oma koodi järjepidevamaks muuta.