BEMIT: Use helpers all the time vs. extend them in components vs. repeat them in components?

Question

I'm using the BEMIT (BEM + ITCSS) methodology in a project. BEMIT allows you to use helpers ("utilities") such as .u-hidden to hide an element.

I have a system where any numeric value (font-size, margin, padding, etc.) can only be a multiple of a base unit. I've created a mixin that generates margin and padding helpers automatically, based on that base unit (.u-margin-top-8, .u-margin-top-16, etc.) this way I can easily space elements without having to create a specific rule for that.

Yet, when I'm creating a component (in the ITCSS fashion) and I need a specific element to always have, let's say a margin-left of 16px (which is the same rule as my .u-margin-left-16 helper), I'm wondering what's the best thing to do:

1) Use the helper class in the 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>

• upsides: no additional CSS to write
• downsides: has to be repeated in the HTML every time

2) Extend the helper class in the component's code (with @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>

• upsides: component can be used out of the box, reuses existing rule
• downsides: generated CSS can cause rule order issues

3) Repeat the code regardless of existing classes

// 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>

• upsides: component can be used out of the box
• downsides: repetitive code

I get that using helpers can be considered a conflicting concept with using components (BEM's blocks) as one favors composition and the other one favors inheritance, but BEMIT sounds like a nice middle ground. Yet, the articles about it never cover that one specific aspect, and I wondered what other people who have been confronted to the same issue think about it.

Answer 1

I suggest with a mixin:

// 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();
  }
}