search

bem-site / bem-forum-content-en

Content BEM forum for English speak users
3 stars 0 forks source link

Card List and Card #77

Closed EvansJahja closed 5 years ago

EvansJahja commented 5 years ago

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.

1

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

2

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

3

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

Thank you very much.

tadatuta commented 5 years ago

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>