DRY для верстальщиков

DRY (Don't Repeat Yourself - (англ.) не повторяй себя) - один из принципов разработки, который применяется везде и повсеместно. Что в этом сложного? Ничего. Зачем эта статья? Чтобы увидеть где и как применяется данный принцип. Конечно же мы будем рассматривать DRY с точки зрения вёрстки, на примерах CSS и препрцессора SASS, HTML-препроцессора Pug и JS на уровне написания компонентов для подключения плагина.

 

Т.к. мы рассматриваем только вёрстку, принцип может по другому применяться в других, более сложных языках и примерах кода, но смысл его остаётся всё тем же — не повторяйся. Задача же этой статьи привить понимание того, что можно не писать тонны одинакового кода.

 

Для полного понимания статьи необходимы минимальные знания по вёрстке, чтобы хотя бы понимать, что же всё-таки происходит.

 

 

И так, начнём с CSS. 
Почему же я выбрал SASS? SASS — самый популярный препроцессор, который позволяет избегать сложных повторений и создаёт из CSS целый язык программирования.

На тему DRY CSS будет 2 примера:

Первый пример будет исходить из обыденности вёрстки. А именно вставление иконок в блоки со ссылками.

 

 

Т.к. сейчас не время HTML, представим, что это список <ul>, в котором есть элементы <li>, в которых в свою очередь есть ссылки <a>. Вёрстка всего нас мало интересует, поэтому рассмотрим, как вставить иконку через псевдоэлемент :before.

 

Не забываем ссылке дать position: relative; размеры и свойства оформления.

 

(P.s. для ссылок задан общий класс .social__link и класс с названием иконки, например .social__link--vk)

 

.social__link.social__link--vk:before {
  content: url(icon-vk.svg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
…

 

И этот код мы повторяем для каждого элемента. На выходе мы видим очень много одинакового кода. Отличаются только пути к картинкам. Слишком громоздко, не находите? Сейчас же мы подключаем принцип DRY и перерабатываем код в удобный и читаемый.

 

.social__link:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.social__link—vk.social__link {
  content: url(icon-vk.svg);
}
.social__link—mail.social__link {
  content: url(icon-mail.svg);
}
…

 

И так для каждой иконки.

Кода стало гораздо меньше, не правда ли? В этом и смысл. А так же переработанный код стал более понятный и удобный. Для общего класса мы задаём позиционирование и основные стили, а уже для специальных классов-модификаторов мы задаём пути к иконкам. И если нам нужно что-то поменять, нам не нужно будет скролить тысячи строк в надежде глазом уловить нужный класс.

 

Перейдём ко второму примеру. Здесь мы с помощью SASS сделаем так называемый миксин (обычная функция, прямо как в любом языке программирования).

Пример будет основан на предыдущем. «Что здесь ещё дорабатывать?» – скажете вы. А я отвечу: «Дорабатывать можно всё!».

 

Вы могли заметить, что вот этот код

 

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

 

довольно часто встречается в проекте, оно и не удивительно, ведь это один из самых популярных способов выравнивания в CSS.

«Так можно же просто через запятую перечислить все классы, которым нужны эти стили! Ты же показывал в прошлой статье, как это правильно оформлять.» - конечно, если проект маленький и его можно будет не дорабатывать =)

Ведь всегда понадобится что-то дописать или изменить в том или ином классе.

И так уже уменьшенный код у нас есть, теперь его осталось уменьшить ещё сильнее.

 

Наш миксин будет выглядеть примерно так:

 

@mixin align-center() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

Это простой миксин и о расширяемости его возможностей мы поговорим в другой раз.

Задача этого миксина использовать именно этот код именно там, где нам нужно. 
Сам миксин можно поместить в отдельный файл с миксинами и просто импортировать его в главный файл разработки. И так, перепишем то, что у нас получилось:

 

.social__link:before {
  @include align-center();
}
.social__link—vk.social__link {
  content: url(icon-vk.svg);
}
.social__link—mail.social__link {
  content: url(icon- mail.svg);
}
…

 

Не забываем, что для каждой иконки нужно прописать свой путь.
Код стал ещё короче! Это нам и нужно.

 

Из «скатерти» CSS стилей мы сделали всего 18 строк (для каждой иконки, не считая сам миксин, он будет переиспользоваться и радовать нас и дальше).

 

Теперь поговорим о Pug.

Pug так же как и SASS для CSS превращает наш обычный HTML в почти что полноценный язык программирования, ну и синтаксис конечно немного меняет...

В Pug тоже есть миксины, о них и пойдёт речь. Пример всё тот же, список социальных ссылок.

Примерный код будет такой:

 

ul.social__list
  li.social__item
    a(href=”vk.com”).social__link.social__link—vk
…

 

И так каждый раз писать элементы <li> для каждой ссылки.. Уф, много кода.. А если нужно класс какой-нибудь добавить к  <li>, это что же, к каждому элементу вручную дописывать? Неет, это не про нас, мы же думаем наперёд и применяем принцип DRY!

Создадим простенький миксин:

 

mixin social-item(icon, link) 
  li.social__item
    a(href=link, class=“social__link—”+icon).social__link

 

Вот и всё, миксин готов! (Можно селекторы написать и по-другому, но так будет наглядней.)

Теперь можно преобразовать наш код:

 

ul.social__list
  +social-item(“vk”, “vk.com”)
  +social-item(“facebook”, “facebook.com”)
…

 

И так далее. Но я скажу ещё кое-что. И это можно организовать, ведь от повторений мы не избавились!

Добавим переменную со всеми данными в наш файл .pug:

 

- var socialItems = [
  {
    icon: “vk”,
    link: “vk.com”
  },
  {
    icon: “facebook”,
    link: “facebook.com”
  }
  …
]

 

И так далее. Теперь у нас есть объект со всеми данными, которые нам нужны.
Осталось только его перебрать и всё!

 

each item in socialItems
  +social-item(item.icon, item.link)

 

Всё, конец! Конечный код будет выглядеть так:

 

- var socialItems = [
  {
    icon: “vk”,
    link: “vk.com”
  },
  {
    icon: “facebook”,
    link: “facebook.com”
  }
  …
]

mixin social-item(icon, link) 
  li.social__item
    a(href=link, class=“social__link—”+icon).social__link

ul.social__list
  each item in socialItems
    +social-item(item.icon, item.link)

 

Итого: мы сделали компонент, который выводит всё, что нам нужно, без наших усилий! Ну, только в нашу переменную всё вносить нужно, и всё! Именно для таких целей существуют и Pug и SASS, они помогают делать наш код чище и понятнее, где от нас лишь требуется несколько телодвижений.

 

Теперь же рассмотрим JS.

 

 

Представим такую ситуацию, нам на странице нужны ползунки. Логично, что обычные мы так стилизовать не можем, поэтому берём любой плагин из любимых интернетов. Я взял noUiSlider. Примерное подключение выглядит вот так:

 

noUiSlider.create(slider, {
  start: [10, 80],
  connect: true ,
  range: {
    ‘min’: 0,
    ‘max’: 100 
  }
})

 

Здесь slider это элемент, который и будет нашим ползунком (просто div в HTML, найти его можно с помощью document.querySelector() и т.д.)

Так же в плагине могут быть и другие опции, но мы рассмотрим только эти.

Круто, теперь нужно точно так же добавить и второй ползунок, берём и добавляем, а затем видим, что код у нас практически одинаковый. Решение: написать крутую функцию!

 

function addRangeSlider = (elemId, start, end, min, max) => {
  const slider = document.querySelector(`${elemId}`);
  noUiSlider.create(slider, {
    start: [start, end],
    connect: true ,
    range: {
      ‘min’: min,
      ‘max’: max 
    }
  }
}

 

В данной функции я использую синтаксис ES6. Давайте рассмотрим построчно, что же делает данная функция.

В первой строке всё понятно, мы создаём функцию с некоторыми аргументами, которые будут в неё передаваться. Вторая строка находит наш элемент по его id, который мы изначально задали в HTML. Про такие кавычки можно почитать здесь. Дальше мы создаём наши ползунки с помощью слайдера. Вместо значений для опций плагина мы вставляем наши аргументы.

 

И так, осталось только инициализировать наши ползунки! Давайте посмотрим на полный код:

 

function addRangeSlider = (elemId, start, end, min, max) => {
  const slider = document.qerySelector(`${elemId}`);
  noUiSlider.create(slider, {
    start: [start, end],
    connect: true ,
    range: {
      ‘min’: min,
      ‘max’: max 
    }
  }
};

addRangeSlider(‘#range-slider-1’, 10, 80, 0, 100);
addRangeSlider(‘#range-slider-2’, 30, 90, 0, 100);

 

Вот и всё, это действительно очень просто и понятно. Теперь нам не нужно переписывать один и тот же код, чтобы инициализировать наши ползунки, достаточно одной строки!

 

Конечно, можно написать ещё лучше и ещё круче, но статья и так получилась достаточно длинной, так что я думаю принцип понятен. Чем меньше кода – тем лучше, а главное понятнее.

 

Ну что ж, статья выдалась действительно массивной. Я надеюсь вы поняли этот принцип, ведь хороший программист не тот, кто пишет много кода, а тот, кто правильно пишет код.

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!