Модификатор, микс или блок-обертка для внешних отступов?

Question

[smogstart]

У навигации разный margin-left в разных местах сайта. Как правильно поставить внешний отступ? С помощью блока-обертки, миксина или модификатора?

Comments

[WapSter]

На вопрос нельзя однозначно ответить, не видя макета и кода. Но можешь не добавлять сюда все это, ответ как тебе будет удобно. Но честно не понимаю при чем тут миксин и бэм.

[smogstart]

WapSter, Хочу разобраться с теорией. По БЭМу блоку нельзя задавать внешние отступы, только через микс, но стили микса header__nav оказываются в header.css, а не nav.css, что плохо для дальнейшего использования (по словам одного наставника). Модификатор ,кажется, не совсем для этого. Остается блок-обертка, но она увеличивает код.

[WapSter]

smogstart, миксом самое лучшее. Но на самом деле, не всегда стоит прям придерживаться правил его. И иногда можно задать и внешний отступ)

[smogstart]

А блок-обертка может использоваться?

Answer 1

[FabiBoom]

Лучше миксовать.

<header class="site-header">
    <nav class="site-header__nav nav"></nav>
</header>

<footer class="site-footer">
    <div class="site-footer__nav nav"></div>
</footer>

.site-header__nav {
   margin-left: 25px;
}
/* ... */
.site-footer__nav {
   margin-left: 15px;
}

Comments

[smogstart]

А если верстка разбита на отдельные файлы, то site-header__nav оказывается в файле site-header.css, а не nav.css. Это нормально?

[FabiBoom]

smogstart, Скажу больше, по хорошему, так и должно быть. Я так понимаю, что в файле site-header.css у вас все, что относиться к блоку site-header, а именно - сам блок, его элементы и модификаторы, а site-header__nav как раз является его элементом. Поэтому все нормально.

[smogstart]

Но при компонентной верстке получится, что класс site-header__nav будет висеть в файле nav.html.