CSS Master

csso style.css style.min.css

Bydefault,CSSOwillrearrangepartsofyourCSS.Itwill,forexample,mergede-
clarationblockswithduplicatedselectorsandremovesomeoverridenproperties.
ConsiderthefollowingCSS:

body {

margin: 20px 30px;

padding: 100px;

margin-left: 0px;

}

h1 {

font: 200 36px / 1.5 sans-serif;

}

h1 {

color: #ff6600;

}

Inthissnippet,margin-leftoverridestheearliermargindeclaration.We’vealso
repeatedh1asaselectorforconsecutivedeclarationblocks.Afteroptimizationand
minification,weendupwiththis:

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

➥ sans-serif;color:#f60}

CSSOremovedextraneousspaces,linebreaks,andsemicolons,andshortened
#ff6600to#f60.CSSOalsomergedthemarginandmargin-leftpropertiesinto
onedeclaration(margin: 20px 30px 20px 0)andcombinedourseparateh1selector
blocksintoone.

Now,ifyou’reskepticalofhowCSSOwillrewriteyourCSS,youcandisableits
restructuringfeatures.Justusethe--restructure-offor-offflags.Forexample,
runningcsso style.css style.min.css -offgivesusthefollowing:

Debugging and Optimization 119