CSS Master

body{margin:20px 30px;padding:100px;margin-left:0}h1{font:200 36px/

➥1.5 sans-serif}h1{color:#f60}

NowourCSSisminified,butnotoptimized.Disablingrestructuringwillkeepyour

CSSfilesfrombeingassmallastheycouldbe.Avoiddisablingrestructuringunless

yourunintoproblems.

Preprocessors,introducedinChapter 9 ,offerminificationaspartoftheirtoolset;

however,usingCSSOcanshaveadditionalbytesfromyourfilesizes.

Code-quality Tools

Finally,let’sdiscusstoolsthathelpyouanalyzethequalityofyourCSS.Though

severalCSScode-qualitytoolsexist,inthissectionwe’llfocusonthree:

■ CSSLint

■ analyze-css

■ UnCSS

Thefirsttwotools,CSSLintandanalyze-css,checkyourCSSforproblemssuchas

inefficientselectors,invalidrules,orunnecessaryspecificity.Thesehavethegreatest

impactonCSSmaintainability,althoughinefficientselectorscanalsoaffectfront-

endperformance.

Thethirdtool,UnCSS,checksyourCSSforunusedselectorsandstylerules.It

parsesastylesheetandalistofHTMLpages,andreturnsaCSSfilethat’sstripped

ofunusedrules.

AllofthesetoolsareavailableasNode.jspackages,andcanalsobeinstalledusing

NPM.

Ifyou’reworkingonasmallsite,suchasafewpagesthatareupdatedinfrequently

orapersonalblog,manyoftheproblemsthatthesetoolsflagcansafelybeignored.

You’llspendtimerefactoringforlittlegaininmaintainabilityandspeed.Forlarger

projects,however,they’reinvaluable.They’llhelpyouheadoffmaintabilityprob-

lemsbeforetheystart.

120 CSS Master