3

我想过用这样的 BEM 树构建一个网格：

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

还有像这个预告块这样的内容

  • 预告片
  • 预告片__缩略图
  • 预告片头条
  • Teaser__body
  • 预告片链接

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

    <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，这感觉有缺陷，因为不同块的样式会相互影响。

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

4

2 回答 2

2

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

隔离

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

单一责任

teaser通过查看您的标记，您的组件似乎需要了解grid正确渲染的知识。我会尽量避免这种情况，并在组件本身中包含组件所需的布局。它实际上看起来像 Nicole Sullivan 的经典媒体对象，所以值得一看。这遵循了组件应该具有单一职责的原则。组件在页面上的grid位置以及组件的位置和样式。

通过这样做，teaser组件现在可以在任何地方使用，无论是否带有grid.

于 2014-10-23T11:46:39.850 回答
1

这是正确的处理方式吗？

是的。这是一种混合。官方教程使用了这种技术。

在 CSS 代码中，首先对所有“视觉”块（like grid）进行样式设置很方便，然后是语义块（like teaser）。因为语义块更具体，可以覆盖可重用视觉模式中的一些默认规则。

于 2014-10-23T09:10:20.347 回答