CSS Master

CSS File Organization

PartofagoodCSSarchitectureisfileorganization.Amonolithicfileisfineforsolo

developersorverysmallprojects.Forlargeprojects—siteswithmultiplelayouts

andcontenttypes,ormultiplebrandsunderthesamedesignumbrella—it’ssmarter

touseamodularapproachandsplityourCSSacrossmultiplefiles.

SplittingyourCSSacrossfilesmakesiteasiertoparceltasksouttoteams.Onede-

velopercanworkontypography-relatedstyles,whileanothercanfocusondevelop-

inggridcomponents.Teamscansplitworksensiblyandincreaseoverallproductiv-

ity.

SowhatmightagoodfilestructurethatsplitstheCSSacrossfileslooklike?Here’s

astructuresimilartoonesI’veusedinrecentprojects:

■ reset.css:resetandnormalizationstyles;minimalcolor,border,orfont-related

declarations

■ typography.css:fontfaces,weights,lineheights,sizes,andstylesforheadings

andbodytext

■ layouts.css:stylesthatmanagepagelayoutsandsegments,includinggrids

■ forms.css:stylesforformcontrolsandlabels

■ lists.css:list-specificstyles

■ tables.css:table-specificstyles

■ carousel.css:stylesrequiredforcarouselcomponents

■ accordion.css:stylesforaccordioncomponents

Ifyou’reusingapreprocessor,suchasSassorLess,youmayalsowanttoinclude

a_config.scssor_config.lessfilethatcontainscolorvariablesandthelike.

Inthisstructure,eachCSSfilehasaspecificandnarrowscope.Howmanyfiles

you’llultimatelyendupwithdependsonhowmanyvisualpatternsorcomponents

arecalledforbyyoursite’sdesign.

72 CSS Master