CSS Master

Figure 2.3. A home page might have header, main, and footer blocks

Blockscancontainotherblocks.Forexample,aheaderblockmightalsocontain
logo,navigation,andsearchformblocksasseeninFigure2.4.Afooterblockmight
containasitemapblock.

Figure 2.4. A header block that contains logo, navigation, and search blocks

Moregranularthanablockisanelement.AstheBEMdocumentationexplains:^14

Anelementisapartofablockthatperformsacertainfunction.

Elementsarecontext-dependent:theyonlymakesenseinthecontext

oftheblocktheybelongto.

Asearchformblock,forexample,containsatextinputelementandasubmitbutton
element,asevidentinFigure2.5.Toclarify,we’reusing“element”inthedesign
elementsenseratherthantheHTMLelementsense.

(^14) https://en.bem.info/method/definitions/
CSS Architecture and Organization 85