How to get rid of copypasta?

Question

css

In general, I have a lot of similar pages: Header, sub-header, text, sections

For the typography, I created the following classes:

.l-about-typography {
  &-title {
    font-size: 32px;
    font-weight: bold;
    line-height: 1.38;
    color: #1e2736;

    @media (max-width: 767px) {
      font-size: 28px;
      line-height: 1.2;
    }
  }

  &-sub-title {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    color: #1e2736;

    @media (max-width: 767px) {
      font-size: 18px;
    }
  }

  &-text {
    font-size: 16px;
    line-height: 1.75;
    color: #424447;

    a {
      display: inline;
      color: #3f89ea;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

And in all pages I prescribe classes for typography and I also turn these blocks into elements:

<h1 class="hist__main-title l-about-typography-title">Текст</h1>
<h4 class="hist__sub-title l-about-typography-sub-title"></h4>
<p class="hist__text l-about-typography-text"></p>

<h1 class="politika__main-title l-about-typography-title">Текст</h1>
<h4 class="politika__sub-title l-about-typography-sub-title"></h4>
<p class="politika__text l-about-typography-text"></p>

As a result, I prescribe typography classes on each page and duplicate the code of the elements, and in css the code is copied:

.hist {
  &__main-title {
    margin-bottom: 40px;
  }

  &__section {
    &:not(&:last-child) {
      margin-bottom: 40px;
    }
  }

  &__sub-title {
    margin-bottom: 20px;

    &--mt-top {
      margin-top: 20px;
    }
  }

  &__text {
    &:not(&:last-child) {
      margin-bottom: 10px;
    }
  }
}

.politika {
  &__main-title {
    margin-bottom: 40px;
  }

  &__section {
    &:not(&:last-child) {
      margin-bottom: 40px;
    }
  }

  &__sub-title {
    margin-bottom: 20px;

    &--mt-top {
      margin-top: 20px;
    }
  }

  &__text {
    &:not(&:last-child) {
      margin-bottom: 10px;
    }
  }
}

And on all pages I have a duplication of section, text, sub-title, main-title ...

How can I take out this code? I was thinking of adding modifiers to the typography that will add the necessary padding, because according to bem, blocks should not have padding in the form of margin. And the typography in my case is bem - block.

Also, I don’t know how to take out section, because it only has an indent from the bottom of the code, I don’t know how to take it out for bem

PS: As I understand it, everything is fine from the BEM store, but there is no unification. I have 6 such pages, if I want to change the indentation of a section, I will have to go through 6 pages, which is not convenient, and you can accidentally skip a page

Answer 1

Mixes are needed in order to make adjustments to a specific block, if such adjustments are repeated in different blocks, then this is a modifier

Answer 2

Lol, instead of actually making a single entity and using it on any pages, you have more problems with this buoy ...