Нужно ли имя класса для всего, что связано с CSS в BEM?

Question

Поскольку люди все еще советуют использовать БЭМ для более крупных проектов, я подумал, что могу попробовать. Но я уже столкнулся с проблемой, настроив header-элемент страницы.

---

Вот как выглядит заголовок страницы:

<header class="header">
    <img class="header__logo" src="logo.png" alt="alt">

    <button class="header__button-toggle" type="button">Open menu</button>

    <nav class="header__nav" role="navigation">
        <ul>
            <li><a href="">Nav item A</a></li>
            <li><a href="">Nav item B</a></li>
            <li><a href="">Nav item C</a></li>
        </ul>
    </nav>
</header>

Я понимаю, как определить простые элементы, такие как header__logo или же header__button-toggle,

---

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

Теперь мне нужно применять стили не только к nav-элемент, но и к ul, li и a-элементы, а также. Как мне это сделать?

Я бы сделал это следующим образом:

.header {
    &__nav {
        property: value;

        ul { property: value; }
        li { property: value; }
        a { property: value; }
    }
}

Но действительно ли это в БЭМ или БЭМ хочет устранить?

---

Должен ли я в конечном итоге с чем-то вроде этого?

.header {
    &__nav {
        property: value;

        &__list { property: value; }
        &__item { property: value; }
        &__anchor { property: value; }
    }
}

Который чрезвычайно загромождает HTML:

<nav class="header__nav" role="navigation">
    <ul class="header__nav__list">
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item A</a>
        </li>
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item B</a>
        </li>
        <li class="header__nav__item">
            <a class="header__nav__anchor" href="">Nav item C</a>
        </li>
    </ul>
</nav>

---

Может быть, кто-то может помочь мне понять, как это будет решаться правильно с точки зрения БЭМ.

Answer 1

Да, вы должны назначить класс каждому элементу, к которому нужно обратиться в CSS (см.: https://en.bem.info/methodology/html/). И вам не следует бояться лишних байтов в разметке, так как gzip сожмет их просто отлично.

Но вы должны избегать элементов элементов (пожалуйста, обратитесь к: https://en.bem.info/methodology/faq/#can-i-create-elements-of-elements-block__elem1__elem2 для обоснования).

Таким образом, правильная разметка будет выглядеть так:

<nav class="header__nav nav" role="navigation">
    <ul class="nav__list">
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item A</a>
        </li>
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item B</a>
        </li>
        <li class="nav__item">
            <a class="nav__anchor" href="">Nav item C</a>
        </li>
    </ul>
</nav>

Вы также можете заметить, что есть два разных класса на nav элемент. Это называется mix в методологии БЭМ: https://en.bem.info/methodology/css/