如何使用 BEM 正确定位页面范围块

Question

下面是我当前的 header 结构。 page（根）组件是隐含的。

如您所见，social-links 块的几何形状当前由 header__social-links 混合处理（相对于 header 的绝对位置）。

如何正确地将 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>

Answer 1

您应该将 header 和 social-links 这两个范围分开作为父/子。隔离 BEM 块很重要。当在同一元素上使用来自不同块的两个类时，我们将面临未来干扰和回归的风险，因为我们将更新一个块而不检查另一个块。

分离对于能够移动 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>

干杯，托马斯.

如何使用 BEM 正确定位页面范围块

How to properly position a page scope block with BEM

html

css

bem