Answer the question
In order to leave comments, you need to log in
What modifier to put (BEM)?
Hello I
just started to study BEM and I immediately had questions
There is such a header on the site https://skr.sh/s2wgsKZVOvg
On the
right there is a menu It will be used several times on the page
Wrote the code
<header>
<div class="content-header">
<div class="content-header__logo">
<a href="/" class="content-header__href">
<img src="/img/logo.svg" alt="">
</a>
</div>
<nav class="content-header__nav nav-menu">
<a href="#" class=""></a>
<a href="#" class=""></a>
</nav>
</div>
</header>
Answer the question
In order to leave comments, you need to log in
In the example, a few things are not very good:
1. An empty header tag. Those. empty class.
2. As g33km rightly noted in principle, it is considered normal to invest in a list tag, because it is easier to arrange multi-level navigation at the expense of layers.
3. But the presence of empty tags also goes against BEM, since nested elements must have classes that allow them to be controlled. Encapsulation by classes implies detachment from tags, although it is necessary to set indents to zero just in case (and for a list without fail), etc.
4. What g33km says in his answer :
If this navigation will be used in different places in the same form, then it does not need the .content-header__nav class
<header class="content-header">
<a
href="/"
class="content-header__logo logo">
<img
src="/img/logo.svg"
class="logo__image"
alt="">
</a>
<nav class="content-header__nav nav">
<ul class="nav__list nav__list--inline">
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
</ul>
</nav>
</header>
...
<footer class="footer">
<nav class="footer__nav nav">
<ul class="nav__list nav__list--column">
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
<li class="nav__item"><a href="" class="nav__link"></a></li>
</ul>
</nav>
</footer>
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question