Ofcourse,thisruleassumesthatyouhaveaccesstoandcontroloverthemarkup.
Thismaynotbetrueifyou’redealingwithalegacyCMS.It’sappropriateandne-
cessarytousechild,descendant,orpseudo-classselectorsinsuchcases.More Architecturally Sound CSS Rules
PhilipWaltondiscussestheseandothertheserulesinhisarticle“CSSArchitec-
ture.”^9 IalsorecommendHarryRoberts’siteCSSGuidelines^10 andNicolas
Gallagher’spostAboutHTMLSemanticsandFront-endArchitecture^11 formore
thoughtsonCSSarchitecture.We’llnowlookattwomethodologiesforCSSarchitecture.Bothmethodswere
createdtoimprovethedevelopmentprocessforlargesitesandlargeteams;however,
theyworkjustaswellforteamsofone.Block-Element-Modifier (BEM)
BEM,^12 orBlock-Element-Modifier,isamethodology,anamingsystem,andasuite
ofrelatedtools.CreatedatYandex,^13 BEMwasdesignedforrapiddevelopmentby
sizabledevelopmentteams.Inthissection,we’llfocusontheconceptandthe
namingsystem.BEMmethodologyencouragesdesignersanddeveloperstothinkofawebsiteasa
collectionofreusablecomponentblocksthatcanbemixedandmatchedtocreate
interfaces.Ablockissimplyasectionofadocument,suchasaheader,footer,or
sidebar,illustratedinFigure2.3.Perhapsconfusingly,“block”herereferstothe
segmentsofHTMLthatmakeupapageorapplication.(^9) http://philipwalton.com/articles/css-architecture/
(^10) http://cssguidelin.es/
(^11) http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
(^12) https://en.bem.info/
(^13) https://www.yandex.com/
84 CSS Master