css - BEM CSS : Similar blocks and style sharing

Question

阅读 BEM CSS 并使用它编写了一些小网站 - 我对它相当熟悉。但是，我仍然不确定如何处理非常相似但没有关系的 block 。

假设我有很多无序列表 block ，它们的第一行都具有相同的样式。其他列表项可以采用不同的布局，并且彼此完全无关。

我发现自己给 block 命名(例如“最新消息”、“即将发生的事件”)，然后在 CSS 中堆叠所有这些 block 变得很麻烦——更不用说难以管理了。

感谢这个东西不是一个通用的解决方案；但想象一下，很多人都会遇到同样的问题。将这些 block 称为“标准列表”然后将列表项作为 block 不是更有效吗？

这似乎违背了 BEM 试图实现的整个原则。我应该能够将“最新消息”放在任何我想要的地方。这样我就必须获得包含最新新闻内容的正确“标准列表”？

希望这不会太困惑!任何建议都会很棒!

Answer 1

有一件重要的事情经常被忽视——混合的使用。

mix 是将几个不同的 block 放在同一个 DOM 节点上的可能性。

因此对于您的示例，您可以创建

<ul class="latest-news list">

这将为您提供列表所需的所有常见样式，并为最新消息添加特性。