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