CSS Master

Installation

You’reprobablysensingapatternhere.Installanalyze-cssusingNPMwiththe

followingcommand:

npm install -g analyze-css

Basic Usage

analyze-csscanhandlebothlocalfilesandURLs.Toanalyzealocalfile,usethe

--fileflag:

analyze-css --file stylesheet.css

Toanalyzearemoteassetinstead,usethe--urlflag:

analyze-css --url http://example.com/css/stylesheet.css

analyze-cssoutputsJSON-formatteddatatostandardoutput(again,thismeansthe

terminalorcommandpromptwindow)bydefault.Butwe’llredirectittoafile:

analyze-css --file stylesheet.css > nameoffile.json

analyze-cssreportsavarietyofdetailsaboutyourCSSinametricsfield.These

includeoldPropertyPrefixes(thenumberofpropertiesthatnolongerrequirea

vendorprefix),andlength(filesizeinbytes).Buttherealmeatofthereportlies

intheoffendersfield.Belowisasnippetofoutputfromanalyze-css:

{

"generator": "analyze-css v0.9.1",

"metrics": {...

},

"offenders": {

"universalSelectors": [

"[type=submit] @ 108:3",

"[type=submit]:hover @ 116:3",

"[type=submit]:focus @ 116:3",

"[disabled] @ 133:1",

"[id=landing] @ 173:3",

"[id=landing] header @ 174:3"

],

124 CSS Master