I use scss in my application. I use these rules quite often.

display: flex;
justify-content: center;
align-items: center;

I want to reuse these styles with mixins or extends. I want to understand what is the best way.

On one hand, using Mixins is more safe, but on the other, it generates more CSS in the output. Extends along with placeholders generates less CSS in the output, but can cause cascade problems. What is the best case for this set of rules.

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Somewhere in the component's styles
.title {
  @include flex-center;
}

// Extends
%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Somewhere in the component's styles
.title {
  @extend %flex-center;
}