Card List and Card

Forum /

Hi, I'm new to BEM and are refactoring a legacy codebase. I still have trouble deciding which ones are Blocks and which one are Elements.

The docs says that Blocks are for independent stuffs but Elements are for those who are dependent on the blocks.

And to my question:

Suppose I have a card. I currently always use cards inside card-list. However, in the future, I might use cards outside card-list. I don't know if I will ever do such thing or not. Do I make card an element of card-list block, or do I keep them independent, and is there a sort-of rule of thumb to figure this out?

I currently have several different ways of writing it and I wonder which one would be the most BEM-ish.

<div class="card-list">
  <div class="card-list__card">
  <div class="card-list__card">
</div>

<div class="list list--type-card">
  <div class="card list__item">
  <div class="card list__item">
</div>

<div class="card__list">
  <div class="card">
  <div class="card">
</div>

Thank you very much.

6 years ago

tadatuta

I'd suggest to keep card as independent block (so it should not have any positioning styles, etc) and mix it with an element of card-list block:

<div class="card-list">
  <div class="card card-list__card">
  <div class="card card-list__card">
</div>

In order to leave a comment you need to login.