How to choose the correct name for a class in CSS can be crucial in terms of clean, readable and maintainable code. The code you write is not only for you, but it is also for other programmers, therefore, is important to have a standard for names and terms.

What is BEM?

BEM stands for Block Element Modifier and is a methodology or set of rules to name CSS classes1getbem.com, Introduction..

  • Block: This is an entity with its own meaning, for instance, a menu, a button, a navigation bar.
  • Element: This is a component of the block, an internal part of it, it can be a menu item, a button icon.
  • Modifier: This is an alteration on a block or element, for example, a menu fixed, a button disabled, a flag on a card.

Here we have an example of how to think of BEM using the main page of codepen as a reference2codepen, featured:

Example without explanation

The idea of BEM is to think about reusable blocks in the whole project and to avoid being so specific in the CSS selectors. In both cards of the example above we can see pretty much the same elements: the preview of the post, the picture of the user, the name of the post and the name of the user. But in the PRO user, we see a special badge. In terms of BEM it would look something like this:

Example with explanation

The bigger entity here is the card itself, and that would be a block, everything inside can be seen as an element or modifier. In this case, the names and pictures are elements of the block because those elements make the composition of the block. But, not every card has the PRO badge, only the pro users have it, therefore, that’s a modification of the block we’re talking about. We could also see the PRO badge as an optional element that not always is shown in the block. So instead of a modifier for the name, it could be an element of the card that is optional to render.

How to write it?

The rules of BEM apply to the way you write the names of the classes3getbem.com, blocks, elements, and modifiers..

  • Block: a noun in lower case and singular, if it has than a single word use hyphen to separate them.
  • Element: The block of where it belongs plus double underscore with one noun.
  • Modifier: Block or element plus double hyphen with the modification in one word.

Examples of how to write BEM

.product-card{}
.product-card__img{}
.product-card__title{}
.product-card__text{}
.product-card__text--bold{}
  • product-card is the block, the biggest entity.
  • product-card__img, product-card__title and product-card__text are elements of their parent block
  • product-card__text--bold is a modifier of an element
.button{}
.button__text{}
.button--disable{}
.button--bigger{}
  • button is the block
  • button__text is an element of the block
  • button--disable and button--bigger are modifiers of the block

BEM is not that strict

As we discuss before, BEM is just a methodology to help you get a cleaner CSS code, but actually, you can modify the rules in a way they fit your needs. For instance, instead of using a double hyphen to indicate the modifiers, you could use just one, but, you should respect your own convention within the code and don’t mix conventions along with it.

.button--disable{}
.button-disable{}

Both classes are correct if you only use one on the whole project. This way every other developer would adapt to the convention and the result would be a cleaner and maintainable code.

References   [ + ]