Миксы для позиционирования и несколько вопросов

Здравствуйте, скажите пожалуйста. Часто на проектах необходимо реализовать вывод каких-нибудь айтемов, будь то:

Новинки
Горячие товары
Просмотренные товары
И т.д Для такой реализации я создал блок-родитель:

<div class="cellRow hotProduct__cellRow">
    <div class="cellRow__content">
    <div class="cellRow__title">Горячие товары</div>
    <div class="cellRow__inner">

  //Блоки с айтемами

    </div>
    </div>
</div>

Для позиционирования этого блока в месте для вывода "горячих товаров" я создал ему микс из классов "hotProduct" и класса блока "cellRow" - то есть в данном случае я буду позиционировать блок с помощью класса "hotProduct__cellRow".

Наделе же в моей разметке нет родительского блока hotProduct, в моем случае это лишний div который по сути ни за что не отвечает.
Первый вопрос - на сколько правильно так делать? Или же нужно обвернуть мой блок "cellRow" в блок "hotProduct"?
Сам по себе блок cellRow подразумевается, как универсальный, то есть и какой-то характерный внешний вид ему задавать не получится - Допустим в этом месте сайта у этого блока должен быть фон и бордер - их я тоже задам через микс - hotProduct__cellRow.
Второй вопрос - будет ли это правильно? Или для этого лучше подойдет модификатор?

Еще один непонятный для меня момент, он касается непосредственно самих айтемов, которые будут лежать внутри блока "cellRow", их я тоже делаю блоками, а не элементами, допустим вот так:

<div class="cellItem">
       <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
       <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
       <div class="cellItem__price">222222</div>
 </div>

Эти блоки будут выводится, допустим опять же, в разных местах, местах того же блока-обвертки "cellRow", допустим в блоке "hotProductcellRow"(Отступление: далее двойные подчеркивания между блоками вырезаются и текст выделяется жирным) айтемы "cellItem" будут выводится по шесть штук в ряд, в блоке "cellRow" но уже с миксом "newProductcellRow" они должны выводится по 4 в ряд и иметь фон.
Третий вопрос - можно ли задать микс блоку "cellItem" не по имени родителя cellRow(потому что по сути это ничего не даст) а по имени деда, то есть "hotProductcellItem" в месте с "горячими" товарами, "newProductcellItem" в месте с новыми товарами, хочется так сделать но предполагаю что это не правильно и лучше для этого воспользоваться модификаторами? Вот код полностью:

<body class="page">
<div class="cellRow hotProduct__cellRow">
    <div class="cellRow__content">
    <div class="cellRow__title">Заголовок</div>
    <div class="cellRow__inner">

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>

        <div class="cellItem hotProduct__cellItem">
            <div class="cellItem__title"><a href="#" class="link cellItem__link">Заголовок Айтема</a></div>
            <a href="#" class="link cellItem__link"><img class="cellItem__img" src="..."></a>
            <div class="cellItem__price">Заголовок Айтема</div>
        </div>
    </div>

    </div>
</div>

7 years ago

tadatuta

Элемента без родителя быть не должно. И с точки зрения семантики странно, что нет отдельной сущности hotProduct. Если в интерфейсе существует этот самый «горячий продукт», то логично же, чтобы он был явно представлен в разметке.
Если cellRow универсальный, то правильно задавать ему кастомные свойства через элементы родителя, т.е. схема с hotProduct__cellRow — верная.

cellItem в принципе могут быть отдельными блоками, но я бы придрался к названиям: cellRow и cellItem намекают на создание раскладки а-ля таблица и никак не раскрывают семантики того, что в них лежит. Если это так, то я бы все-таки скорее создал блок layout с элементами layout__row и layout__cell и их бы уже миксовал с блоками, которые нужны по смыслу.

Микс с дедами/прадедами или любыми другими родителями вверх по дереву — это нормально.

7 years ago

mrScrpt

Большое Вам спасибо за ответы.
Не могли бы Вы привести пример разметки, на моем примере(простите за тавтологию) С применением блока layout и с элементами layoutrow и layoutcell
Попробовал воссоздать со слов, но получилась какая-то белеберда, чего то не дополнял

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