BEM CSS: Similar blocks and style sharing

Question

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.

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?

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!

Answer 1

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

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

So for your example you may create

<ul class="latest-news list">

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