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

【问题标题】：How to properly position a page scope block with BEM如何使用 BEM 正确定位页面范围块
【发布时间】：2020-05-05 21:17:46
【问题描述】：

以下是我当前的标题结构。 page（根）组件是隐含的。

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

如何正确地将social-links 提取到全局（页面）范围，使其成为独立块（页面上的固定位置）？

如果我引入包裹header 的site 或page 块，那么我可以应用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>

【问题讨论】：

标签： html css bem

【解决方案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>

干杯，托马斯。

【讨论】：

link - 是一个可重用的原子组件，在 BEM 方法下使用是完全合法的。至于前缀，我也没有看到对此的要求。尽管如此，我还是看到了使用前缀的 BEM + SMACSS 组合。我希望我能解决基本问题而不是前缀问题。我没有为审阅者设置任何非 bem 类。我很欣赏你的第 1 点（关于可能的干扰）。然而，您的帖子确实没有回答我的问题：“我如何正确提取到全局（页面）范围的社交链接，使其成为一个独立的块（页面上的固定位置）？”
如果我没有回答这个问题...我不应该理解这个问题。我会考虑并更新我的答案。如果您的所有类都是 BEM 类，则不需要前缀。但是link site-links__link 似乎不太好。你使用site-links 的元素作为link 的修饰符，你打破了隔离。
好的，谢谢。关于link + site-links__link 的东西，好吧，我为什么要打破隔离？ link 提供基本的东西，比如 {cursor: pointer;color:#fff;} 等等。然后site-links__link 扩展它。
是的，所以site-links__link 不是自治的，它总是需要link。您可以将原子类与 BEM 一起使用，用于泛型修饰符，例如 u-uppercase
我做了一个更新，演示了它可能是什么。