How to add a BEM element using emmet?

Question

HTML

I use VS Code + emmet + bem.
As you can see from the example, when I want to add an element with the class to an existing block .card__inner, we get a block with a modifier instead.
.card__inner+TAB ----> How to add an element with class ? And the second question, how to add a comment using for certain tags, and not for all that contain a class or id? <div class="card card--inner"></div>
.card__inner
|c

Answer 1

in settings add:

"emmet.syntaxProfiles": {
    "html": {
      "filters": "html, bem"
    }
  },
  "emmet.preferences": {
    "bem.elementSeparator": "__",
    "bem.modifierSeparator": "--",
    "bem.shortElementPrefix": "-",
    "lorem.defaultLang": "en"
  },

the syntax is as follows:
Regarding the second question, you need to smoke emmet settings, namely filters
And in vscode, in "emmet.preferences": {} write what you want to see in the comment
For example:

"emmet.preferences": {
    "filter.commentBefore": "<!-- [#ID][.CLASS] -->\n",
    "filter.commentAfter": "\n<!-- [#ID][.CLASS] end -->"
},

Also, in order not to constantly write | c to display a comment, you can again add a setting:

"emmet.syntaxProfiles": {
    "html" : {
      "filters" : "html, c"
    }
},

Answer 2

Unable to create ul with classes and nesting
ul.section__list>li.section__item>a.section__link
In phpStorm, the construction works without problems