If English is your first language, you’re probably doing BEM wrong

I love BEM, the HTML/CSS/JS class naming methodology. You may too. Even if you don’t use it, you may be aware of it. It has 4 constructs:

.block
.block-—modifier
.block__element
.block__element--modifier

Except that is not the whole story. There is another BEM, with a similar, but different, syntax.

This is the alternative syntax. I call it Classic BEM. It has 6 constructs:

.block
.block_modifier
.block_key_value
.block__element
.block__element_modifier
.block__element_key_value

Both syntaxes say names-must-be-hyphenated.

Both syntaxes say that there’s a double underscore between blocks and elements.

They part ways on modifiers. I call the 4 construct syntax Western BEM, and it uses a double hyphen for modifiers. Classic BEM uses either a single underscore for boolean modifiers, or an underscore-delimited pair of names for key/value modifiers.

Western BEM vs Classic BEM

Here’s how they differ in practice. Let’s say you have a .list block, and a .list__element that you want to give a modifier of “active” to:

.list__element--active     // Western BEM
.list__element_active // Classic BEM

I can see why Western BEM is more initially appealing. It looks cleaner and because of that, it scans easier.

Let’s then say we want to indicate that the element has a “value” of 4:

.list__element--value-4    // Western BEM
.list__element_value_4 // Classic BEM

Western BEM still scans nicer, right? While that’s possibly true, I have issue with the meaning that the naming conveys.

All modifiers in Western BEM are boolean states, specifying a value of false (absence) or true (presence).

.list__element--value-4      // list.element.value-4 = true
// this is not what we want to say

Classic BEM syntax conveys a different meaning:

.list__element_value_4       // list.element.value = 4
// this is what we want to say

By allowing both boolean and key/value modifiers on blocks and elements, the Classic BEM naming convention allows us to build up a more powerful and meaningful representation of the structures we are expressing with our classes.

A quick history of BEM

BEM was formulated by Yandex (https://yandex.ru), the Russian search engine giant. Classic BEM syntax was their solution to the problems of organising complex and shared components between their many sites and applications.

Their authoritative site sits at https://en.bem.info/methodology/quick-start.

My guess is that the problem arose because this excellent site was only translated to English after the alternative syntax had taken hold.

The Western BEM syntax seems to derive authority from http://getbem.com. If the creators of that site helped popularise the syntax in the Western-speaking world, they have done the development community a service. I only wish that they hadn’t changed the syntax and robbed us of the powerful metadata we can express by using key/value modifiers.

You can choose your BEM

I lied in the title of this article.

Western BEM is not wrong, it’s just that there’s a more powerful (if less accessible) syntax out there. Faced with the choice, I opt for the more expressive Classic BEM syntax.

I hope you will, too.

<section class="conclusion conclusion_author_christian-chown">
    <h2 class="conclusion__title>
Classic BEM
</h2>
    <p class="conclusion__entry conclusion__entry_pleading">
It's not too late to switch.
</p>
</section>

References

https://en.bem.info for Classic BEM
http://getbem.com for Western BEM

Like what you read? Give Christian Chown a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.