CSS Master

Figure 2.5. A search block with text input and submit button elements

Amaincontentblock,ontheotherhand,mighthaveanarticlelistblock.Thisarticle

listblockmightcontainaseriesofarticlepromoblocks.Andeacharticlepromo

blockmightcontainimage,excerpt,andRead Moreelements,aspresentedinFig-

ure2.6.

Figure 2.6. A promotional block for a website article

Together,blocksandelementsformthebasisoftheBEMnamingconvention.Ac-

cordingtotherulesofBEM:

■ Blocknamesmustbeuniquewithinaproject.

■ Elementnamesmustbeuniquewithinablock.

■ Variations of a block―say, a search box with a dark background―should add a

modifier to the class name.

Blocknamesandelementnamesareusuallyseparatedbyadoubleunderscore

(.block__element).Blockandelementnamesaretypicallyseparatedfrommodifier

86 CSS Master