CSS BEM, which chars for the modifier..?

Question

I'm not sure which is the official website, I've found getbem.com and en.bem.info.

One suggests using -- for the modifier (Naming):

CSS class is formed as block’s or element’s name plus two dashes.

The other _ for the modifier (Modifier name):

A modifier name is delimited by a single underscore (_).

I know I can use either, and really it's just important to be consistent, but I like to try and use official specs whenever possible.

• Which is the official website..?
• Should I really be using -- or _ for modifiers..?

Answer 1

Which is the official website?

BEM started as an informal set of guidelines by Yandex, which they later formalized on en.bem.info, so in that regard en.bem.info is the "canonical" version of BEM.

With that said, there are many flavors of BEM, and I myself use a variant influenced largely by Harry Roberts and Nicolas Gallagher.

This brings me to your next question:

Should I really be using -- or _ for modifiers?

To that my answer is: you should be consistent in your usage, but you may use whatever character(s) you'd like for the variant of BEM that you're using. Just be sure that everyone on your team understands which variant you're standardizing on.

This is similar to using tabs vs two spaces vs four spaces (vs hotdogs). It doesn't actually make a difference beyond being something that people tend to have an irrationally strong personal preference for.

To help normalize people, I use an example syntax of a block, element, and modifier that shows what the variant is normalizing on:

I used to primarily use:

the-block__the-element--the-modifier

But I now prefer:

TheBlock_theElement-theModifier

for its brevity.