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

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

Поделиться
Отправить
Плюсануть
Запинить
Класснуть
Отправить
Поделиться

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

 

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

 

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

 

 

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

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

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

 

css-examle

 

Т.к. сейчас не время 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.

 

js-example

 

Представим такую ситуацию, нам на странице нужны ползунки. Логично, что обычные мы так стилизовать не можем, поэтому берём любой плагин из любимых интернетов. Я взял 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);

 

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

 

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

 

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

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