7

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!

Andy
  • 117
  • 7
  • Just found this answer elsewhere: http://stackoverflow.com/a/22566593/727370 Seems to be one solution. Would anyone else recommend this approach? I guess the 'latest-news' could be seen as a modifier of the block? `style="list list--latest-news"` – Andy Sep 01 '14 at 19:31
  • I think your problem is rooted in naming things. You are using content based class names ('news', 'events'), while presentational ('list', 'list--horizontal') class names work much better with the BEM methodology. http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard – mlnmln Sep 05 '14 at 17:05

1 Answers1

5

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.

tadatuta
  • 2,007
  • 11
  • 12
  • 1
    Thanks for this. Everything should be 'classed up', right, so that I can target anything I need? So: `
    • List item
    `.     – Andy Sep 06 '14 at 19:47
  • 1
    But shouldn't peculiarities be dealt with by modifiers? – Andy Sep 06 '14 at 19:53