我考虑用这样的BEM树构建一个网格：
还有像这个预告块
这样的内容如果我想在网格的不同列中显示预告元素，则会引导我进入以下标记：
<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开始，这只是感觉有缺陷，因为不同块的样式会相互影响。
这是正确的处理方式吗？ 有什么建议可以提供更好的解决方案吗？
答案 0 :(得分：1)
这是正确的处理方式吗？
是。这是一个混合。官方教程uses this technique。
在CSS代码中，首先设置所有“可视”块（如grid）的样式，然后设置语义块（如teaser）。因为语义块更具体，可以从可重用的视觉模式中覆盖一些默认规则。
答案 1 :(得分：1)
您所做的事情并不正确，但我会将每个组件的职责分开。在我看来，页面网格的职责是将组件放在页面上，但不需要在组件中定位元素。
重要的是始终以完全隔离的方式构建组件。组件不应该了解其容器或依赖它。您应该能够将组件放在任何页面上，任何位置，并且可以正确呈现。这是这项技术的重点之一。
通过查看您的标记，您的teaser组件似乎需要了解grid才能正确呈现。我会尽量避免这种情况，并在组件本身中包含组件所需的布局。它实际上看起来像Nicole Sullivan的经典media object，所以值得一看。这符合组件应该承担单一责任的原则。 grid定位页面上的组件以及组件的位置和样式。
通过这样做，teaser组件现在可以在任何地方使用，无论是否有grid。