Как правильно разместить блок области видимости страницы с помощью БЭМ - PullRequest
Новая
       0

Как правильно разместить блок области видимости страницы с помощью БЭМ

1 голос
/ 06 мая 2020

Ниже представлена ​​моя текущая структура заголовка. Подразумевается компонент page (root).

Как видите, геометрия блока social-links в настоящее время обрабатывается смесью header__social-links (абсолютное положение относительно заголовка).

Как мне правильно извлечь social-links в глобальную (страницу) область, сделав его независимым блоком (фиксированная позиция на странице)?

Если я введу блок site или page, оборачивающий header, тогда я могу применить page__social-links смесь, чтобы решить эту проблему. Следует ли тогда header преобразовать в page__header? 

<body>

    <header class="header hero" role="banner">

      <img class="header__logo" src="assets/logo.png" alt="">

      <div class="social-links header__social-links">
        <a class="link social-links__link" href="#">
          <svg class="social-links__icon">...</svg>
        </a>
        ...
        <a class="link social-links__link social-links__link--last" href="#">
          <svg class="social-links__icon">...</svg>          
        </a>
      </div>

      <div class="navbar header__navbar">
        <nav class="site-links navbar__site-links">
          <a class="link site-links__link" href="#">1</a>
          <a class="link site-links__link" href="#">2</a>
          <a class="link site-links__link" href="#">3</a>
          <a class="link site-links__link" href="#">4</a>
        </nav>
      </div>

    </header>
    ...
</body>

1 Ответ

1 голос
/ 06 мая 2020

Вы должны разделить две области header и social-links как родительскую / дочернюю. Важно, чтобы БЭМ-блоки были изолированы. При использовании двух классов из разных блоков в одних и тех же элементах мы рискуем в будущем вмешиваться и регрессировать, когда мы обновим один блок, не проверяя другой.

Разделение также важно для возможности перемещения social-links блок. 

// Show the fixed header on scroll
var fixedHeader = document.querySelector('.page__social-links');

document.addEventListener('scroll', function() {
  if (window.scrollY > 100) {
    fixedHeader.classList.remove('page__social-links--hidden');
  } else {
    fixedHeader.classList.add('page__social-links--hidden');
  }
});
body {
  margin: 0;
  height: 300vh;
}

.page__social-links {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: hotpink;
}

/* Hide the fixed header by default */
.page__social-links--hidden {
  display: none;
}

.header {
  border-bottom: 1px solid hotpink;
}

.social-links {
  text-align: center;
}

.social-links__link {
  padding: 0 0.5em;
  line-height: 3em;
}
<div class="page">
  <div class="page__header">
    <header class="header hero" role="banner">
      <img class="header__logo" src="assets/logo.png" alt="" />

      <div class="header__social-links">
        <div class="social-links">
          <a class="link social-links__link" href="#">
            twitter
          </a>
          <a class="link social-links__link social-links__link--last" href="#">
            facebook          
          </a>
        </div>
      </div>
    </header>
  </div>
  <div class="page__social-links page__social-links--hidden">
    <div class="social-links">
      <a class="link social-links__link" href="#">
        twitter
      </a>
      <a class="link social-links__link social-links__link--last" href="#">
        facebook          
      </a>
    </div>
  </div>
</div>

Ура, Томас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...