something.md

Main Title

I have a utility class such as:

.mb {
  margin-bottom: 20px;
}

If element doesn't have bespoke styles

If the element which needs the utility class doesn't have any bespoke CSS styles attached to it just use the regular HTML class.

<div class="mb">
  ...
</div>

If element has bespoke styles

If the element is already targeted by CSS, then @extend the utility class to the elements class name/selector.

.post {
  background-color: #CCC;
  font-size: 2em;
  @extend .mb;
}

<div class="post">
  ...
</div>

Combination

Use both?

<div class="post mb">
  ...
</div>

Which is the best?