Как избавиться от копипасты?

Question

[wakenbyWork]

В общем у меня есть множество похожих страниц: Заголовок, под заголовок, текст, секции

Для типографии я создал такие классы:

.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;
      }
    }
  }
}

И во всех страницах прописываю классы для типографии и эти блоки превращаю еще и элементы:

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

В итоге я на каждой страницы прописываю классы типографии и дублирую код элементов, и в css идет копирования кода:

.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;
    }
  }
}

И на всех страницах у меня идет дублирование section, text, sub-title, main-title...

Как можно вынести этот код? Я думал добавить модификаторы к типографии которые будут добавлять нужны отступы, ведь по bem у блоков не должно быть отступов в виде margin. А типография в моем случае это bem - блок.

Так-же не знаю как вынести section, ведь у нее из кода только отступ снизу, по bem не представляю как его вынести

P.S: Как я понимаю со сторы BEM все отлично, а вот по унификации нет. У меня 6 таких страниц, если я захочу поменять отступ у секции, то придется проходить по 6 страницам, что не удобно, и можно случайно пропустить страницу

Comments

[Алексей Абрамов]

Как вариант, использовать миксины.
Запаковываете те участки css, которые повторяются и потом инклюдите куда необходимо.
Sass mixin

[Ankhena]

А типография в моем случае это bem - блок

Почта тоже бэм-блок?

По вопросу не вполне ясно, что у вас там происходит, в вашей типографии.
Но пусть так: есть у вас блок - статья.
.article
и её элементы
.article__title
.article__subtitle
и т.д.

Их и используйте для всех страниц. Зачем вам разные классы? Если что-то меняется, добавляйте модификаторы.

[wakenbyWork]

Не совсем понял, вот у меня есть лаяут, и внутри него уже идет код разных страниц, и у меня две идеи как вынести повторяющейся код, не подскажите какой правильный подходи?:

Вариант 1:

<div class="l-about">
    <div class="l-about__inner">
        <div class="l-about__left">

            <!-- history - это блок (страница) следовательео этот блок меняеться на docs, info-doxod и так далее -->
            <div class="history">
                <h1 class="l-about__title">Большой заголовок</h1>

                <div class="history__timer"></div>
                <div class="history__banner"></div>

                <div class="l-about__section">
                    <h4 class="l-about__sub-title">Заголовок по меньше</h4>
                    <p class="l-about__text">Текст</p>
                </div>
            </div>

        </div>

        <div class="l-about__right">
            <div class="about-sidebar"><!-- code --></div>
        </div>
    </div>
</div>

Вариант 2:

<div class="l-about">
    <div class="l-about__inner">
        <div class="l-about__left">

            <!-- history - это блок (страница) следовательео этот блок меняеться на docs, info-doxod и так далее -->
            <div class="history shared-about-elements">
                <h1 class="shared-about-elements__title">Большой заголовок</h1>

                <div class="history__timer"></div>
                <div class="history__banner"></div>

                <div class="shared-about-elements__section">
                    <h4 class="shared-about-elements__sub-title">Заголовок по меньше</h4>
                    <p class="shared-about-elements__text">Текст</p>
                </div>
            </div>

        </div>

        <div class="l-about__right">
            <div class="about-sidebar"><!-- code --></div>
        </div>
    </div>
</div>

[Одиночка Айс]

shared-about-elements__sub-title

доставляет...

Answer 1

[Виталий Першин]

Миксы нужны для того чтобы внести корректировки в конкретный блок, если такие корректировки повторяются в разных блоках, значит это модификатор

Answer 2

[Одиночка Айс]

Лол, вместо того, чтобы сделать по факту единую сущность и использовать на любых страницах, вы с этим буемом имеете больше проблем...

Comments

[Виталий Першин]

Знаем мы ваши сущности, спасибо, нет