Выбор между блоком и элементом в BEM

165

29 ноября 2018, 19:00

Допустим есть такая структура

Серый - родительскиий блок. Внутри него два похожих элемента с элементами внутри.

Как лучше обозначить красный элемент - элементом или все же блоком?

С одной стороны он встречается несколько(2) раз, с другой - только в сером блоке. Кроме того при обозначении как блок мы получаем более логичную структуру но вместе с этим теряем логическую привязку к серому блоку.

Как правиильно обозначать в этом случае?

Answer 1

Сущность может быть одновременно блоком и элементом. Называется Микс

*{ 
  box-sizing:border-box; 
} 
body{ 
  margin:0; 
} 
 
.catalog{ 
  display:flex; 
  flex-wrap:wrap; 
  justify-content:space-between; 
  padding:15px; 
  background-color:gray; 
} 
 
.card{ 
  width:300px; 
  display:inline-block; 
  margin:0 15px 15px; 
  padding:10px 10px 50px; 
  background-color:red; 
} 
.card__header{ 
  height:50px; 
  background-color:green; 
  margin:0 0 10px; 
} 
.card__body{ 
  display:flex; 
} 
.card__item{ 
  min-height:50px; 
  flex:1 1 auto; 
  background-color:green; 
} 
.card__item:first-child{ 
  width:30%; 
  flex:0 0 auto; 
  margin:0 10px 0 0; 
} 
 
.catalog__card{ 
  margin:0; 
  width:calc(50% - 5px); 
  flex:0 0 auto; 
}

<div class="catalog"> 
 
  <div class="card catalog__card"> 
    <div class="card__header"></div> 
    <div class="card__body"> 
      <div class="card__item"></div> 
      <div class="card__item"></div> 
    </div> 
  </div> 
   
  <div class="card catalog__card"> 
    <div class="card__header"></div> 
    <div class="card__body"> 
      <div class="card__item"></div> 
      <div class="card__item"></div> 
    </div> 
  </div> 
   
</div>