CSS

Если вдруг до этого вы ни разу не слышали о CSS-переменных, то поясним, что это новая функция CSS, благодаря которой в таблице стилей вы получаете все возможности переменных без какой-либо дополнительной настройки.

Иначе говоря, CSS-переменные позволяют отойти от старых способов создания стилей:

h1 {
font-size: 30px;
}

navbar > a {
font-size: 30px;
}

…в пользу следующего:

:root {
--base-font-size: 30px;
}

h1 {
font-size: var(--base-font-size);
}

navbar > a {
font-size: var(--base-font-size);
}

На первый взгляд такой синтаксис выглядит не совсем привычно, но зато дает вам очевидное преимущество – с ним вы сможете изменять размеры шрифтов по всему приложению, работая только с одной переменной —base-font-size.

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

Установка

Мы будем добавлять отзывчивость сайту-портфолио, который выглядит примерно так:

Десктопный вид
Десктопный вид

На десктопе все смотрится довольно неплохо. Но, как вы видите на первой картинке ниже, с мобильной версией дела обстоят иначе.

То, как страница открывается на мобильных устройствах сейчас
То, как страница открывается на мобильных устройствах сейчас
То, как страница открывается на мобильных устройствах сейчас
То, как мы хотим, чтобы она выглядела

На последней картинке мы немного изменили стили для лучшего отображения на мобильных. Вот, что мы сделали:

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

2.  сдвинули весь шаблон немного вверх.

3.  уменьшили размер шрифтов.

Для этого потребовались следующие корректировки CSS:

h1 {

  font-size: 30px;

}

#navbar {

margin: 30px 0;

}

#navbar a {

font-size: 30px;

}

.grid {

margin: 30px 0;

  grid-template-columns: 200px 200px;

}

Если говорить точнее, то в медиа-запросах мы подправили следующее:

·        уменьшили размер шрифта h1 до 20px;

·        уменьшили отступы сверху и снизу от #navbar до 15px;

·        уменьшили размер шрифта внутри #navbar до 20px;

·        уменьшили отступ над .grid до 15px;

·        заменили два столбца в .grid на один.

Примечание: Конечно же, в нашем приложении, да даже внутри этих селекторов, было намного больше CSS. Но, чтобы не уходить от темы, я убрал все лишнее и незадействованное в нашем в медиа-запросе.  Вот здесь в Scrimba вы найдете полный код приложения.

Старый способ

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

@media all and (max-width: 450px) {

  navbar {

     margin: 15px 0;

  }

  navbar a {

    font-size: 20px;

}

  h1 {

    font-size: 20px;

  }

  .grid {

    margin: 15px 0;

    grid-template-columns: 200px;

  }

}

Новый способ

Давайте посмотрим, как решить эту проблему с помощью CSS-переменных. Для начала, сохраним внутри переменных значения, которыми будем неоднократно пользоваться или изменять:

:root {

  --base-font-size: 30px;

  --columns: 200px 200px;

--base-margin: 30px;

}

А затем будем брать эти переменные и вставлять их в нужное место приложения:

#navbar {

margin: var(--base-margin) 0;

}

#navbar a {

 font-size: var(--base-font-size);

}

h1 {

 font-size: var(--base-font-size);

}

.grid {

  margin: var(--base-margin) 0;

  grid-template-columns: var(--columns);

}

Как только мы прописали все это, то можем смело менять значения переменных внутри медиа-запроса:

@media all and (max-width: 450px) {

  :root {

    --columns: 200px;

    --base-margin: 15px;

    --base-font-size: 20px;

}

Такой код – более чистый. И вместо того, чтобы создавать множество селекторов, мы просто прописываем :root.

Таким образом, мы уменьшили наш медиа-запрос с четырех селекторов к одному, и 13 строк кода превратились в 4.

Это был простой пример. А теперь представьте себе полноценный сайт, в котором, к примеру, —base-margin отвечает за все пустое пространство вокруг приложения. Куда проще взять и поменять его значение один раз, чем перегружать медиа-запрос комплексными селекторами.

Подводя итог, можно сказать, что CSS­-переменные – это, однозначно, будущее отзывчивости.

Перевод статьи Per Harald Borgen«How to make responsiveness super simple with CSS Variables»