🔖 MindBEMding – getting your head ’round BEM syntax (archive)
BEM class names are meant to be descriptive of their place, relationships and states.
.person {}
.person__hand {}
.person--female {}
.person--female__hand {}
.person__hand--left {}In the above example it is important to note the order of --modifiers and __elements:
- A person has an element hand with the modifier for which side.
- A person has a modifier for gender that has the element hand.
Good BEM naming requires us to understand which category something falls into. Just because a something lives inside a block doesn’t always mean that it is an element. It could be a block in its own right. For example, something like a site logo on the header could be .header__logo, but if you are going to reuse the logo in the footer too you could separate it out into its own block .site-logo.