Как сделать адаптивность максимально простой с помощь 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.

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

Настройка

Мы собираемся сделать адаптивным сайт-портфолио:

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

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

Для этого нам необходимо изменить CSS:

h1 { font-size: 30px;
}
#navbar { margin: 30px 0;
}
#navbar a { font-size: 30px;
}
.grid { margin: 30px 0; grid-template-columns: 200px 200px;
}

В частности, в медиа запрос необходимо внести следующие правки:

Заметка: в приложении, конечно, намного больше 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.

Мы уменьшили меди запрос с 4 селекторов до 1, с 13 строк до 4.

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

Подводя итоги, можно сказать, что CSS переменные – определенно, будущее адаптивности. Если хотите изучить эту технологию, рекомендую пройти мой бесплатный курс на Scrimba. Вы вмиг станете мастером CSS переменных

Автор: Per Harald Borgen

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.