css - BEM - 如何处理网格和内容 block 的交集

Question

我想像这样用 BEM 树构建一个网格:

• 网格
• grid__行
• 网格__列组
• 网格__列

还有类似这个预告片的内容

• 预告片
• 预告片__缩略图
• 预告片__标题
• 预告片__正文
• 预告片__链接

如果我想在网格的不同列中显示预告片元素，它会引导我使用以下标记:

    <div class="grid__column-group teaser">
      <div class="grid__column">
        <img class="teaser__thumbnail"/>
      </div>
      <div class="grid__column">
        <h3 class="teaser__headline">...</h3>
        <p class="teaser__body">..</p>
      </div>
    </div>

我刚开始使用 BEM，这感觉有缺陷，因为不同 block 的样式会相互影响。

这是正确的处理方式吗？对更好的解决方案有什么建议吗？

Answer 1

您所做的并没有错，但是我会分开每个组件的职责。在我看来，页面网格的职责是在页面上定位组件，但不应要求在组件内定位元素。

隔离

重要的是始终以完全隔离的方式构建组件。一个组件不应该知道它的容器或者依赖它。您应该能够将您的组件放在任何页面上的任何位置，并且它会正确呈现。这是该技术的重点之一。

单一职责

从您的标记来看，您的 teaser 组件似乎需要了解 grid 才能正确呈现。我会尽量避免这种情况，并在组件本身中包含组件所需的布局。它实际上看起来像经典media object妮可沙利文，所以值得一看。这遵循了组件应该有单一职责的原则。 grid 在页面上定位组件，组件定位其元素并为其设置样式。

通过这样做，teaser 组件现在可以在任何地方使用，无论有没有 grid。