search

Box-Of-Hats / Bem-VSCode-Extension

A VSCode extension for helping with inserting BEM (Block-Element-Modifier) classes.
BSD 3-Clause "New" or "Revised" License
29 stars 5 forks source link

Incorrect recommendation with modifier name conventions #47

Open danilmoh opened 2 years ago

danilmoh commented 2 years ago

When naming the modifier of an element as follows: block__element_modifier_modifier-value, the extension says the name is wrong and prompts me to rename it like this: block__element-modifier-modifier-value (it "thinks" the modifier is name of an element). Example:

<div class="links">
        <a class="links__projects links__projects_indent_right">Projects</a>
</div>

After this is written, the projects_indent_right gets highlighted as incorrect part and popup says this should be named as projects-indent-right which is incorrect modifier naming as said here

ilyachalov commented 2 years ago

@danilmoh I have the same thing.

I need https://en.bem.info/methodology/naming-convention/

block-name

block-name__elem-name

block-name block-name_bool-modifier-name
block-name block-name_modifier-name_modifier-value

block-name__elem-name block-name__elem-name_bool-modifier-name
block-name__elem-name block-name__elem-name_modifier-name_modifier-value

bemHelper.classNameCase: kebab bemHelper.elementSeparator: __ (double underscore) bemHelper.modifierSeparator: _ (single underscore) (Not available) modifierValueSeparator: _ (single underscore)

Extension 'BEM Helper' implements http://getbem.com/naming/

block-name

block-name__elem-name

block-name block-name--bool-modifier-name
block-name block-name--modifier-name-modifier-value

block-name__elem-name block-name__elem-name--bool-modifier-name
block-name__elem-name block-name__elem-name--modifier-name-modifier-value

bemHelper.classNameCase: kebab bemHelper.elementSeparator: __ (double underscore) bemHelper.modifierSeparator: -- (double hyphen-minus) (Not available) modifierValueSeparator: - (single hyphen-minus)

This was stated in issue #40 too.