What is the best way to set the outer geometry for bem blocks?

Question

css

There is a tile block, here is its description:

.title {
  @include heading-h2;

  display: block;
  margin-bottom: 64px;

  @media (width < $media-1200) {
    @include heading-h4;
  }

  @media (width < $media-768) {
    @include heading-h6;
  }

  @media (width < $media-576) {
    @include body-middle-semibold;
  }

  &--mb-small {
    margin-bottom: 24px;

    @media (width < $media-576) {
      margin-bottom: 16px;
    }
  }

  &--mb-big {
    margin-bottom: 64px;

    @media (width < $media-1200) {
      margin-bottom: 40px;
    }

    @media (width < $media-576) {
      margin-bottom: 32px;
    }
  }

  &--center {
    text-align: center;
  }
}

The project has 2 types of indents from the bottom of the title. I decided to put them into modifiers, is it possible to write the external geometry of the block in bem modifiers?

If possible: If the block always has one indent from the bottom, it is better to put it into a modifier too, for example:.title--mb-def

Answer 1

Outer padding and positioning relative to parent blocks must be done using modifiers or mixes. With modifiers we define the basic styles, with mixes we redefine the styles in the context of the current block.

Answer 2

well, if directly according to the canons of BEM, then any external geometry is specified in the elements.
Your title is an element of some external block, so mix it up.

.block
  .block__title.title

.block__title {
  margin-bottom: 1rem;
}