CSS Master

MinificationinthecontextofCSSsimplymeans“removingexcesscharacters.”
Consider,forexample,thisblockofcode:

h1 {

font: 16px / 1.5 'Helvetica Neue', arial, sans-serif;

width: 80%;

margin: 10px auto 0px;

}

That’s 98 byteslong,includinglinebreaksandspaces.Let’slookataminifiedex-
ample:

h1{font:16px/1.5 'Helvetica Neue',arial,sans-serif;width:80%;

➥margin:10px auto 0}

Now our CSS is only 80 bytes long―an 18% reduction. Fewer bytes, of course,
means faster download times and data transfer savings for you and your users.

Inthissection,we’lllookatCSSOptimizer,orCSSO,aminificationtoolthatruns
onNode.js.^4 ToinstallCSSO,you’llfirsthavetoinstallNode.jsandNPM.^5 NPMis
installedaspartoftheNode.jsinstallationprocess,soyou’llonlyneedtoinstall
onepackage.

UsingCSSOdoesrequireyoutobecomfortableusingthecommand-lineinterface.
LinuxandOSXuserscanusetheTerminalapplication(Applications > Terminal.app
forOSX).Ifyou’reusingWindows,utilizethecommandprompt.GototheStartor
Windowsmenuandtypecmdinthesearchbox.

Installing CSSO

OnceyouhavesetupNode.jsandNPM,youcaninstallCSSO.Atacommandline
prompt,type:

npm install -g csso

The-gflaginstallsCSSOgloballysothatwecanuseitfromthecommandline.OS
XandLinuxusersmayneedtousesudo(sudo npm install -g csso).You’llknow

(^4) http://nodejs.org
(^5) https://www.npmjs.com/
Debugging and Optimization 117