CSS Master

CSSframeworkssuchasFoundation^1 andBootstrap^2 usethisapproach.Bothbecome
quitegranularwithseparatefilesforprogressbars,rangeinputs,closebuttons,and
tooltips.Thisallowsdeveloperstoincludeonlythecomponentsthattheyneedfor
aproject.

Pattern Libraries

AcloselyrelatedconcepttosplittingCSSacrossfileslikethisisthepatternlibrary.

AgreatprimeronthesubjectisAnnaDebenham’s“GettingStartedwithPattern

Libraries.”^3

How many files?

Eventhoughwe’reusingseveralCSSfilesfordevelopment,we’renotgoingtoserve
allofthemtothebrowserinthisform.ThenumberofHTTPrequeststhatwe’dre-
quirewouldmakeoursitetakelonegrtoload.Instead,we’llconcatenateour
smallerCSSfilesintoafewlargeronesforproduction.

Concatenation,inthiscontext,meanscombiningmultiplefilesintoasingleCSS
payload.Iteliminatestheneedfor@importstatementsormultiplelinkelements.
Currentbrowsershavelimitsonhowmanyfilestheycandownloadatonce.We
canuseconcatenationtoreducethenumberofnetworkrequests,gettingyourcontent
tousersinlesstime.

Oftenyourwebdevelopmentframeworkwillhandleconcatenationaspartofits
assetmanagementfeatures,suchasRubyonRails.Somecontentmanagementsys-
temsdothesame,whetherasacorefeatureoranadd-on.Preprocessors—introduced
inChapter 9 —alsomakeconcatenationeasy.Ifneitherpreprocessorsnordevelop-
mentframeworksarepartofyourworkflow,chancesarethatyouroperatingsystem
hasaconcatenationutilitythatyoucanuseinstead.

ForMacOSXorLinux,concatenatefilesusingthecatutility:

(^1) http://foundation.zurb.com
(^2) http://getbootstrap.com/
(^3) http://alistapart.com/blog/post/getting-started-with-pattern-libraries/
CSS Architecture and Organization 73