πŸ”– 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.

Leave a Reply

Your email address will not be published. Required fields are marked *