Linter complains about valid BEM

[martijnrusschen]

somehow the linter is complaining about this classname: .table__row--align-top

I configured the linter to enforce BEM class names, but according to this (http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) article it should. Any idea what's going wrong?

[azizur]

Using this sample from http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/:

.person {
  display: block;
}

.person__hand {
  display: block;
}

.person--female {
  display: block;
}

.person--female__hand {
  display: block;
}

.person__hand--left {
  display: block;
}

I am seeing:

[15:07:23] test.scss:9 [W] Selector `person--female` should be written in BEM (Block Element Modifier) format
[15:07:23] test.scss:13 [W] Selector `person--female__hand` should be written in BEM (Block Element Modifier) format
[15:07:23] test.scss:17 [W] Selector `person__hand--left` should be written in BEM (Block Element Modifier) format

Looks like we are doing BEM all wrong.

[Anahkiasen]

No actually Harry here is advocating a BEM syntax which is not the standard (although that's the one I use too). To lint according to this article's syntax you need to set convention to hyphenated_BEM IIRC

Hence this at the end of the article:

So that’s BEM (or a slight variation thereof)

[azizur]

According to @csswizardry on http://cssguidelin.es/#bem-like-naming

The convention is:

Elements are delimited with two (2) underscores (__), and Modifiers are delimited by two (2) hyphens (--).

According to BEM developers on (http://bem.info/tools/bem/bem-naming/):

According to original BEM-naming convention it looks like the following:

'block[_block-mod-name[_block-mod-val]][__elem-name[_elem-mod-name[_elem-mod-val]]]'

(Parameters whithin square brackets are optional)

Block — block-name.
Block's modifier in key-value format — block-name_mod-name_mod-val.
Block's boolean modifier — block-name_mod.
Block's element — block-name__elem-name.
Element's modifier in key-value format — block-name__elem-name_mod-name_mod-val.
Element's boolean modifier — block-name__elem_mod.

I have this in my config:

NameFormat:
  enabled: true
  convention: hyphenated_lowercase # or 'BEM', or a regex pattern
SelectorFormat:
  enabled: true
  convention: BEM

[sds]

Duplicate of #319