How to write the name of the BEM classes correctly?

Question

BEM

Hello.
There is a code example.

<div class="menu">
    <div class="menu__links">
        <a class="menu__links-item" href="/">Item 1</a>
        <a class="menu__links-item" href="/">Item 2</a>
    </div>
</div>

Is it correct to specify menu__links-item for links or would it be correct to write menu__item for links? Explain, using the example of this piece of code, whether it is necessary to specify the name for the links starting from the previous menu__links block, or whether the name should be specified starting from the menu when specifying the name.

Answer 1

It's more of a matter of agreement. In our team, it is customary to use a two-level BEM tree - i.e. do not bind to the name of the parent element, so more flexible.
If the class of the list and its child element differ by only one letter (plural and singular), they are easy to confuse: .menu__itemsand .menu__item, so better: ul.menu__list > li.menu__itemor div.menu__list > a.menu__linketc.
Example:

<div class="menu">
    <div class="menu__list">
        <a class="menu__item" href="/">Item 1</a>
        <a class="menu__item" href="/">Item 2</a>
    </div>
</div>

Answer 2

You display the hierarchy in the element name, and it doesn't matter if it's menu__links-item and not menu__links__item
https://ru.bem.info/methodology/html/#%D0%92%D0%BB...