ПОМНИТЕ: использовать помощников все время против расширения их в компонентах против повторения их в компонентах?

Question

Я использую методологию BEMIT (BEM + ITCSS) в проекте. BEMIT позволяет вам использовать помощников ("утилиты"), таких как .u-hidden скрыть элемент

У меня есть система, где любое числовое значение (font-size, margin, paddingи т. д.) может быть кратным базовому блоку. Я создал миксин, который автоматически генерирует помощники для полей и отступов на основе этого базового блока (.u-margin-top-8, .u-margin-top-16и т. д.) Таким образом, я могу легко размещать элементы, не создавая для этого конкретного правила.

Тем не менее, когда я создаю компонент (в стиле ITCSS), и мне нужен определенный элемент, который всегда должен иметь, скажем, margin-left из 16px (это то же правило, что и мой .u-margin-left-16 помощник), мне интересно, что лучше всего сделать:

1) Используйте вспомогательный класс в HTML

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       ...
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element u-margin-left-16">
        ...
    </div>
</div>

• плюсы: нет дополнительного CSS для записи
• Недостатки: должен повторяться в HTML каждый раз

2) Расширить класс помощника в коде компонента (с помощью @extend)

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       @extend .u-margin-left-16;
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element">
        ...
    </div>
</div>

• положительные стороны: компонент может быть использован из коробки, повторно использует существующее правило
• недостатки: сгенерированный CSS может вызвать проблемы с порядком правил

3) Повторите код независимо от существующих классов

// SCSS
$spacing-unit: 8;

.u-margin-left-16 {
    margin-left: #{$spacing-unit * 2}px;
}

.c-block {
   &__element {
       margin-left: #{$spacing-unit * 2}px;
   }
}

// HTML
<div class="c-block">
    <div class="c-block__element">
        ...
    </div>
</div>

• преимущества: компонент может быть использован из коробки
• недостатки: повторяющийся код

Я понимаю, что использование помощников можно рассматривать как противоречивую концепцию с использованием компонентов (блоков БЭМ), так как один одобряет композицию, а другой - наследование, но BEMIT звучит как хорошая золотая середина. Тем не менее, статьи об этом никогда не охватывают этот конкретный аспект, и мне было интересно, что об этом думают другие люди, столкнувшиеся с той же проблемой.

Answer 1

Я предлагаю с миксином:

// SCSS
$spacing-unit: 8;

@mixin u-margin-left-16 {
  margin-left: #{$spacing-unit * 2}px;
}

.u-margin-left-16 {
  @include u-margin-left-16();
}

.c-block {
  &__element {
    @include u-margin-left-16();
  }
}