Is it possible to use an element and a block at the same time in a block?

Question

BEM

Hello, the question arose whether a block can have an element and a block at the same time, for example, my code:

<header class="header">
  <div class="logo"><img src="img/logo.png" alt="Logo"></div>
  <nav class="menu">
    <ul class="menu-box">
      <li class="menu-box__item"><a href="/" class="menu-box__link">Главная</a></li>
      <li class="menu-box__item"><a href="/" class="menu-box__link">Услуги</a></li>
      <li class="menu-box__item"><a href="/" class="menu-box__link">Наши работы</a></li>
      <li class="menu-box__item"><a href="/" class="menu-box__link">Цены</a></li>
      <li class="menu-box__item"><a href="/" class="menu-box__link">О нас</a></li>
      <li class="menu-box__item"><a href="/" class="menu-box__link">Контакты</a></li>
    </ul>
  </nav>
  <div class="header__number"><i class="fas fa-phone-volume"></i>[phone]</div>
</header>

I have a logo and a menu that will be used at the bottom in the footer, but the menu__number class, I don’t want to make it just a number block, since in my landing there will still be a class of the number type, so what’s the question?
Is it possible to use an element and a block at the same time in a block? Does the BEM methodology allow this?

Answer 1

the block can be used everywhere
the element must be part of the block
and in order:
"menu" you get an empty block, for good you need to change it to something like this:

.menu
  .menu__box
    .menu__item
      .menu__link

".header__number" is an element of the ".header" block and cannot be used without the block, which is exactly how you plan to use it.
But the name "number" is not entirely suitable, it might be worth reconsidering to a more generalized one with the
.header__text.header__text_type_phone modifier.
If "mail" is added later, there will be a choice: either the same styles or make a different element
.header__text.header__text_type_email