@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 страницам, что не удобно, и можно случайно пропустить страницу
  • Вопрос задан
  • 115 просмотров
Решения вопроса 1
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Миксы нужны для того чтобы внести корректировки в конкретный блок, если такие корректировки повторяются в разных блоках, значит это модификатор
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
daemonhk
@daemonhk
ПсиХоПат
Лол, вместо того, чтобы сделать по факту единую сущность и использовать на любых страницах, вы с этим буемом имеете больше проблем...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы