BEM CSS:相似的块和样式共享 [英] BEM CSS: Similar blocks and style sharing

问题描述

阅读有关BEM CSS的信息，并使用编写了一些小站点的代码-我对此非常熟悉.但是，我仍然不确定如何处理非常相似但没有关联的块.

Reading about BEM CSS and having coded some small sites using - I am fairly familiar with it. However, I'm still unsure about how to deal with blocks that are very similar, but have no relation.

说我有很多无序的列表块，它们的顶行样式都相同.其他列表项的布局可以不同，并且彼此之间完全不相关.

Say I have lots of unordered list blocks, which all have an identical style for the top row. The other list items can be laid out differently and are all completely unrelated to each other.

我发现自己将块命名为什么(例如最新新闻"，即将发生的事件")，然后将所有这些块堆叠到CSS中变得很麻烦-更不用说难以管理了.

I find myself naming the block what it is (e.g. 'latest-news', 'upcoming-events'), and then it becomes cumbersome to stack all these blocks in the CSS - not to mention hard to manage.

意识到这些东西并不是一种适合所有解决方案的方法；但是想象很多人遇到同样的问题.将这些块称为标准列表"，然后将列表项作为块会不会更有效?

Appreciate this stuff isn't a one size fits all solution; but imagine lots of folks come up against the same questions. Would it not be more efficient to call these blocks, 'standard-list' and then have the list items as blocks?

这似乎与BEM试图实现的全部原则背道而驰.我应该能够将最新消息"放在我想要的任何地方.这样，我只需要获取保存最新新闻内容的正确标准列表"即可?

Just seems against the whole principle of what BEM is trying to achieve. I should be able to put 'latest-news' anywhere I want. This way I'd have to just get the correct, 'standard-list' that held the latest news content?

希望不要太困惑！任何建议都会很棒！

Hope that isn't too confusing! Any advice would be great!

推荐答案

有一件重要的事情经常会被人们所忽略-混合的使用.

There's one important thing which often slips out of sight — usage of mixes.

混合是可能在同一个DOM节点上放置几个不同的块.

A mix is a possibility to put a few different blocks on the same DOM node.

因此，您可以创建示例

<ul class="latest-news list">

这将为您提供列表所需的所有通用样式，并增加最新消息的功能.

which will give you all the common styling needed for lists and add peculiarities just for latest-news.

这篇关于BEM CSS:相似的块和样式共享的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！