Задать вопрос

Правильная ли разметка и стили по БЭМ?

Всем привет.
Начал изучать БЭМ и столкнулся с некоторыми вещами, которые мне не совсем понятны. Из документации я понял, что независимый блок не должен знать о своем позиционировании и для этого применяются миксы.
У меня есть вот такая шапка:
630f58d7b85a5987136122.png
Я решил, что она состоит из логотипа и навигации(navigation). Блок navigation я разделил на главную навигацию по сайту(site-navigation) и навигацию пользователя(user-navigation), чтобы эти блоки можно было переиспользовать, если это будет необходимо.
Сделал вот такую разметку:
<header class="page__header header">
  <div class="header__wrapper">
    <a href="#" class="header__logo">
      <img src="../img/logo.svg" width="55" height="29" alt="Tripy logo">
    </a>
    <nav class="header__navigation navigation">
      <ul class="navigation__site-navigation site-navigation">
        <li class="site-navigation__item">
          <a href="#" class="site-navigation__link">Home</a>
        </li>
        <li class="site-navigation__item">
          <a href="#" class="site-navigation__link">About</a>
        </li>
        <li class="site-navigation__item">
          <a href="#" class="site-navigation__link">Services</a>
        </li>
        <li class="site-navigation__item">
          <a href="#" class="site-navigation__link">Price</a>
        </li>
        <li class="site-navigation__item">
          <a href="#" class="site-navigation__link">Contact</a>
        </li>
      </ul>
      <ul class="user-navigation">
        <li class="user-navigation__item">
          <a href="#" class="user-navigation__link">Login</a>
        </li>
        <li class="user-navigation__item">
          <a href="#" class="user-navigation__link">Register</a>
        </li>
      </ul>
    </nav>
  </div>
</header>


И вот такие стили:
.page__header {
  padding-top: 20px;
  padding-bottom: 20px;
}

.header {
  background-color: #ffffff;

  &__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1170px;
    margin: 0 auto;
  }

  &__navigation {
    display: flex;
    align-items: center;
  }
}

.navigation {
  &__site-navigation {
    margin-right: 146px;
  }
}

.site-navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;

  &__item {
    &:not(:last-child) {
      margin-right: 40px;
    }
  }

  &__link {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-decoration: none;
    color: #808080;
  }
}

.user-navigation {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;

  &__item {
    &:not(:last-child) {
      margin-right: 30px;
    }
  }

  &__link {
    font-weight: 400;
    font-size: 20px;
    line-height: 24px;
    text-decoration: none;
    color: #808080;
  }
}


Не знаю правильно ли я сделал. Внешнее позиционирование я задал миксам. Но вот из-за разделения навигации, получилось дублирование стилей. Они отличаются только отступами между элементами. Но там еще будет разный hover. Если спискам задать один класс, то при hover же получится вложенность. Ну и сами блоки не получится использовать отдельно, так как у них не будет стилей.

Еще вот не знаю как правильно центрировать блоки. Видел, что многие создают обертку и вкладывают содержимое в нее и потом используют по всему сайту. Я сделал подобными образом, но задал максимальную ширину для класса header__wrapper, который еще и задает флексы. Но может правильней делать максимальную ширину для каждого блока миксом? Ведь может же быть ситуация, когда какой-то блок захотят изменить. Ну т.е добавить это для блока .page__header вот так:
.page__header {
  padding-top: 20px;
  padding-bottom: 20px;
  max-width: 1170px;
  margin: 0 auto;
}
  • Вопрос задан
  • 352 просмотра
Подписаться 5 Простой Комментировать
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
правильно
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@SergeyBelozub
Единственное замечания не ставь line-height: в пикселях.Прочти почему
Ответ написан
Комментировать
@YahorDanchanka
Frontend developer
Правильнее перенести paddings из элемента page__header в блок header, так как внутренние отступы не являются внешними. (если у вас box-sizing: border-box).
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы