Advanced CSS Notes: BEM

BEM stands for Block Element Modifier. It is a front-end methodology in CSS for creating re-usable components. Blocks are stand alone entities in BEM.

.header

Elements are merely part of the aforementioned block.

.header__logo

Modifiers are as the name suggests modifies the  element or block in some way. This modification is behavioral or visual.

.header__logo–red

.header–dark