_key-value separator in _modifiers

[furtivite]

Hi, in BEM methodology, it is permissible to set _modifiers with an additional _key-value. For example:

block-name__element-name_modifier-name_modifier-value

Read more

Unfortunately, now the extantion handles such classes as an error. Although is set as the modifier separator, it is suggested to use kebab case instead of when using _key-value.

It would be super cool if you added a rule to the plugin settings to separate modifiers and modifier values, according to the BEM naming convention. And also improved handling of key-value modifiers.

Thanks a lot.

[aradalvand]

I was quite shocked to see this. If this extension is supposed to match BEM standards, then key-value modifiers are a thing in BEM and it shouldn't give you a warning when you have such class names. In addition to the classic single-underscore and double-underscore syntax, it should also handle the double-dash syntax. For example, according to the official documentation, the following class names perfectly conform to BEM standards:

badge_location_top-right
badge--location--top-right

[Box-Of-Hats]

Hi both, thanks for the feedback.

BEM Helper is based on the docs at getbem which doesn't feature the key-value modifiers (as far as I can tell). I don't use key-value modifiers personally but I am interested in supporting them so that other people can make use of them.

I will be looking into this feature shortly so if there's any more examples and/or test cases you can provide, they would be greatly appreciated so that I can get this right 😊

[aradalvand]

@Box-Of-Hats Hi! Thanks! I think the only thing to take into account is that the separator of block or element name and the modifier name, is the separator between the modifier name and modifier value. For instance: If you use single underscore (_) as the separator of block/element name and the modifier name, it would be like this:

block__element_modifier-name_modifier-value

And if you use double-dash (--) as the separator between block/element name and modifier, then it would like this:

block__element--modifier-name--modifier-value

And that's basically it! As far as I know, there is nothing more to it. These are the only guidelines on key/value modifier naming I've seen on en.bem.info.

Thank you in advance.

[Box-Of-Hats]

I've added now support for this in version 1.4.0. Let me know if that's now working as expected for you 😊

@AradAral @furtivite