Modifier, mix or block wrapper for margins?

Question

BEM

The navigation has a different margin-left in different places on the site. How to correctly set the outer margin? With a wrapper block, mixin, or modifier?

Answer 1

It's better to mix.

<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;
}