Это правильная реализация соглашения о присвоении имен BEM для навигации?

Question

Я пытаюсь реализовать главное меню (включая подменю) для веб-сайта, используя соглашение об именах BEM CSS. Я обнаружил, что вложил элементы, которые я считаю антипаттерном конвенции?

<ul class="nav__list">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="nav__group">
                <h3>Nav group</h3>
                <ul class="nav__group__list">
                    <li class="nav__group__item">
                        <a class="nav__group__link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Answer 1

Это всегда, хотя гнездиться глубоко. Вы не можете иметь Элемент Элемента в методологии БЭМ. Так это nav__group__list не правильно, может быть nav__group-list например.

Правильная разметка БЭМ может выглядеть примерно так.

<ul class="nav">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="nav__group">
                <h3>Nav group</h3>
                <ul class="nav__group-list">
                    <li class="nav__group-item">
                        <a class="nav__group-link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Однако вы можете разделить "Список групп", особенно если он может быть использован в другом месте вашего проекта. Ваше меню с разделенными links-group Блок будет выглядеть примерно так:

<ul class="nav">
    <li class="nav__item">
        <a class="nav__link" href="#">Main item</a>
        <div class="nav__submenu">
            <div class="links-group">
                <h3 class="links-group__heading">Nav group</h3>
                <ul class="links-group__list">
                    <li class="links-group__item">
                        <a class="links-group__link" href="#">Nav item</a>
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Answer 2

Я был там, и я знаю, что вы пытаетесь сделать - избегайте стилизации, вкладывая деньги за каждую цену. Поверьте мне, это не так. Старайтесь быть простыми, не бойтесь создавать элементы, предназначенные для вложения друг в друга, но не используйте вложенность второго уровня в своих именах, чтобы избежать "реально __long__class__names" и переименовывать все в случае, если вы хотите изменить структуру HTML, Думайте о БЭМ как о методе выделения компонентов, разбивая сложный пользовательский интерфейс на простые куски, которые легко понять и поддерживать. В вашем конкретном случае я бы, вероятно, пошел что-то вроде этого:

<nav class="nav">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__link" href="#">Main item</a>

            <div class="nav--submenu">
                <div class="nav__group">
                    <h3 class="nav__header">Nav group</h3>

                    <ul class="nav__list">
                        <li class="nav__item">
                            <a class="nav__link" href="#">Nav item</a>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
    </ul>
</nav>

Чем бы я добавил другой стиль для элементов, вложенных в.nav - подменю. Чего вы действительно хотите избежать, так это перекрестного вложения между блоками, но внутри них идите с тем, что кажется правильным, и если блок становится слишком сложным, подумайте о том, чтобы извлечь его часть в новый.