Насколько корректно смешивать блоки?

У меня есть блоки

.square-box
.shadow
.flip-box
.product-card

Нужно сделать карточку продукта квадратной и переворачивающийся, вышел такой haml

.product-card <-- начало блока
  .square-box
    .square-box__content
      .flip-box
        .flip-box__wrapper
          .flip-box__front
            .shadow.shadow--1
              .product-card__title ... <-- И только здесь начались его элементы
              .product-card__image ...

          .flip-box__back
            .shadow.shadow--1 Back content

Получается, что product-card оборачивает пару блоков, которые оборачивают элементы product-card... вписывается ли это в методологию? На текущий момент есть идея вынести стороны карточки продукта в разные блоки product-front-side и product-back-side, но все равно интересно получить ответ на вопрос.

10 years ago

tadatuta

Смешивать вполне корректно. Кроме того, расскажу про такое понятие как микс — это когда на одной DOM-ноде оказывается несколько блоков (или блок + элемент другого блока, элемент блока А + элемент блока Б или другие комбинации). Например, это позволяет выражать те особенности, которые нужны только для square-box внутри product-card не в виде добавления им прямо в код square-box, а в качестве элемента product-card__box, примешанного к square-box. Зачастую за раскладку может отвечать некая сетка (блок grid или layout), внутри которой будут лежать самые разные блоки. Тогда получится, что некий div одновременно будет и layout__cell и, скажем, блоком title:

<div class="page layout">
    <div class="layout__row">
        <h2 class="title layout__cell">Заголовок, смешанный с layout__cell</h2>
    </div>
</div>

Чтобы оставлять комментарии, необходимо авторизоваться.