Как лучше разметить?

314

19 марта 2017, 03:28

<div class="catalog">
  <div class="container clearfix">
    <h2 class="header catalog__header">Lorem</h2>
    <a href="" class="btn catalog__btn">Lorem</a>
    <div class="catalog__item">
      <img class="catalog__img" src="img/image-product.jpg" alt="" width="306" height="206">
      <div class="catalog__inner">
        <h3 class="catalog__title">Title name</h3>
        <b class="catalog__price">300</b>
        <a href="" class="btn catalog__btn_price">Description</a>
        <a href="" class="btn catalog__btn_price">Buy</a>
      </div>          
    </div>
  </div>
</div>

Как лучше разметить данную структуру по бэм? Все оставить как есть или лучше разбить по блокам вложенные элементы

Например так

<div class="catalog">
  <div class="container clearfix">
    <h2 class="header catalog__header">Lorem ipsum.</h2>
    <a href="" class="btn catalog__btn">Lorem.</a>
    <div class="catalog__item">
      <img class="catalog__img" src="img/image-product.jpg" alt="" width="306" height="206">
      <div class="item-inner">
        <h3 class="item-inner__title">Lorem ipsum dolor.</h3>
        <b class="item-inner__price">300</b>
        <a href="" class="btn btn_price">Lorem.</a>
        <a href="" class="btn btn_price">Lorem.</a>
      </div>          
    </div>
  </div>
</div>

Answer 1

Второй вариант правильный. Каталог — это блок, товар — это тоже блок, а не элемент.

В первом случае у вас формируется зависимость товара от каталога, потому вы не сможете его использовать где-нибудь в другом месте, хотя это может понадобиться.