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

Например, есть такая разметка:

<div class="page">
  <ul class="list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Блок .list реиспользуемый, но мне нужно чтобы внутри блока .page отступы между элементами .list__item отличались от стандартных для элемента.

Сейчас я поступаю так: миксую блок .list к .page и каскадом изменяю свойства необходимых элементов.

<div class="page">
  <ul class="page__list list">
    <li class="list__item"></li>
    <li class="list__item"></li>
    <li class="list__item"></li>
  </ul>
</div>

Вот:

.list{
  &__item{
    margin-bottom: 16px;
  }
}

.page{
  &__list{
    .list{
      &__item{
        margin-bottom: 32px;
      }
    }
  }
}

Можно ли так делать? И как стоит поступать в таких случаях?

5 years ago

hvab

Почему бы и нет. Но проблемы могут начаться, когда захочется внутри списка вложить еще один список, но при этом, чтобы у него были отступы изначального блока, а не от page. И придется перебивать каскад... Многословнее, зато надежнее сделать так:

<div class="page">
  <ul class="page__list list">
    <li class="page__list-item list__item"></li>
    <li class="page__list-item list__item"></li>
    <li class="page__list-item list__item"></li>
  </ul>
</div>

Либо так:

<div class="page">
  <ul class="page-list list">
    <li class="page-list__item list__item"></li>
    <li class="page-list__item list__item"></li>
    <li class="page-list__item list__item"></li>
  </ul>
</div>

5 years ago

monochromer

А разве не лучше будет сделать модификатор для list - что-то типа list_gutter

5 years ago

brachkow

Мне кажется что модификатор будет целесообразнее создавать если такое изменение будет многократно повторятся. Но даже в таком случае он будет уступать по гибкости варианту со служебным блоком.

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