P
P
Pashadip2020-07-01 22:06:40
HTML
Pashadip, 2020-07-01 22:06:40

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>

I can't figure out which modifier to put on links in the nav tag: nav-menu__li or content-header__li ?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Arseniy, 2020-07-02
@Pashadip

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

nonsense, as it is an ordinary mix. It is needed in order to determine the location of the navigation block in the header block.
In total, if you don’t shake the pipe structure too much, then this code may look like this:
<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>

The footer I have provided is a sample of how this block can be used "below the page".
Logically, the base style should reset native margins, form basic needs (you can also add nav--white to color the header white, but not the footer (the base color can be black for links).
Well, in principle, a little more you can read it in my newly appeared documentation ... Just yesterday I uploaded it to the Internet, I'm finalizing it and I will be glad to have any questions on this topic... Contacts are in the profile, I'm unlikely to answer, but the most interesting samples are likely to go to a good deed.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question