CSS Master

cat file1.css file2.css > combined-output-file.css

UsingWindows?Trythetypeutility:

type file1.css file2.css > combined-output-file.css

YoucanalsowriteyourownconcatenationscriptusingBash,PHP,Python,oran-

otherscriptinglanguageofyourchoice.

CSS Optimization

ConcatenationisoneaspectofCSSoptimization.It’sjustasimportanttominify

yourfilestoremoveexcesscharactersandwhitespace.Minificationtoolsare

coveredinChapter 3.

Sohowmanyfilesshouldyouuse?That’swhereitgetstricky.Thecurrentbest

practiceistoidentifyyourcriticalpathCSS—theminimumamountofCSSyour

pageneedstorender—andembeditinyourpagesusingthestyleelement.Addi-

tionalCSSfilesshouldbeloadedusingJavaScript.AddyOsmani’spresentation

“CSSPerformanceTooling”^4 providesanexcellentoverviewofthistechniqueand

sometoolsyoucanusetoimplementit.AlsoseetheFilamentGroup’sloadCSS.^5

IfyourcontentwillbeservedusingtheSPDYorHTTP/2protocols,concatenation

maybeunnecessary.WithHTTP/1.1,browsersdownloadassetssequentially;the

nextrequestbeginswhenthepreviousoneends.Underthatmodel,reducingthe

numberofnetworkrequestsimprovessiteperformance;however,SPDYandHTTP/2,

candownloadmultipleassetsatonce.Asaresult,thereisnorealbenefittoreducing

thenumberofrequests.Thereis,however,acosttosendingmorebytesthanneces-

sarytorenderthepage.WilliamChan's“HTTP/2ConsiderationsandTradeoffs”^6

explainsthisingreaterdetail.Thebestapproachwouldbetoidentifyifyourserver

isservingHTTP/2and,ifso,checkwhethermoreofyouuserswillbenefitfrom

actuallysplittingyourassetsdownandonlyloadingthatwhichthepageneeds,or

continuingtoworkintheoldway.Ifyou'reinterestedinlearningmoreaboutper-

(^4) https://www.youtube.com/watch?v=FEs2jgZBaQA
(^5) https://github.com/filamentgroup/loadCSS
(^6) https://insouciant.org/tech/http-slash-2-considerations-and-tradeoffs/
74 CSS Master