Chapter
2. CSS Architecture and Organization
Ifyou’veeverworkedonaCSScodebaseofanysize—orevenasmallcodebase
withmultipledevelopers—youquicklyrealizehowdifficultitistocreateCSSthat
ispredictable,reusable,andmaintainablewithoutbeingbloated.Withaddedde-
velopersoftencomesaddedcomplexity:longerselectors,collidingselectors,and
heavierCSS.
Inthischapter,we’llexploreCSSarchitectureandorganization.Firstupisfile
structure.We’lltakealookathowtomanageCSSacrosslargesites,oraspartof
yourownCSSframework.We’llalsoaddresshowtomanageCSSforolderbrowsers.
Nextwe’lldiscusssomeguidelinesforwritingCSS.EvenifyoudisavowtheCSS
architecturemethodologieswecoverlater,youshouldadheretothesegolden
guidelines.Theserulesmakeiteasiertoavoidselector-namingcollisionsandoverly
longselectors—thekindsofissuesthatcomeupwithinteams.
Finally,we’lltakealookattwoCSSarchitecturemethodologies:Block-Element-
Modifier(BEM)andAtomicCSS.They’reradicallydifferenttoeachother,buteach
approachhasitsadvantages.Inbothcases,thegoalistocreatehighlyreusable,
lightweightCSS.