Итак, можем ли мы уже использовать переменные CSS?

От автора: после всех разговоров последнего времени о том, что мы, наконец, можем использовать CSS Grid, мне стало интересно: какие еще удивительные функции CSS я могу использовать уже сейчас? CSS переменные — первое, что приходило на ум. Прошло много времени с тех пор, как я впервые услышал о переменных CSS и о том, что они вводят в разработку интерфейса совершенно новый набор инструментов и новый способ мышления.

Исторический экскурс по переменным CSS

Переменных CSS были введены еще несколько лет назад, но, похоже, они так и не получили широкого распространения. Учитывая популярность таких препроцессоров, как Sass, front-end разработчики не спешат браться за них.

Лично меня данная тема заинтересовала еще в 2014 году, и с тех пор она прочно входит в сферу моих интересов. Однако только сейчас я задумываюсь над тем, чтобы использовать их непосредственно в рабочих проектах. И я покажу вам, как просто и легко это делается.

Объявление переменных

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

Получение доступа к переменным

Использовать свойство довольно просто. Мы обращаемся к нему через функцию var() и используем свойство, объявленное выше.

Разве это не просто и здорово? Переменные CSS просты в использовании и довольно легко запоминаются. Самая большая проблема с переменными CSS (как и с большинством компонентов CSS) — это выбрать правильное время и место их использования. Разбросать их беспорядочно — это практически гарантированный способ создать путаницу в таблице стилей, и при отладке это, вероятно, создаст сложности.

Следует учитывать надлежащие варианты и стратегии их использования, и именно на это вы должны обратить внимание в первую очередь.

Интересный случай использование: Адаптивные модули

В следующем примере я покажу базовый пример того, как я в настоящее время создаю адаптивные компоненты с использованием переменных Sass. Затем я покажу, как это можно улучшить с помощью переменных CSS — так, как невозможно сделать помощью с препроцессора. Этот конкретный вариант использования применим не ко всем переменным, но он иллюстрирует, как по-разному могут использоваться переменные CSS. Пример Sass

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

Одна из проблем заключается в наличии нескольких медиа-запросов и множества переменных, которые являются родственными, но не связанными. Я мог бы использовать карты для переменных, которые помогли бы сделать все более организованным, но, думаю, что основная проблема заключается в том, что мы используем несколько переменных для определения одного свойства. Это просто неправильно.

Переменные Sass используются прежде других элементов, что означает, что мы должны планировать каждый способ, с помощью которого будем их использовать. Они делают разработку проще, но технически не предоставляют нам никаких новых супер-сил.

Выход предлагают переменные CSS

Переменные CSS не обязательно должны быть объявлены ранее других элементов, они являются динамическими. Это полезно во многих отношениях. Теперь мы можем, исходя из определенных условий, изменять переменные из любого места и для определенных контекстов, таких как медиа-запросы.

Работая со стилями медиа-запросов напрямую, мы можем уменьшить количество медиа-запросов, определяемых для адаптивных стилей. Это также позволяет увидеть общие стили отступов и типографики для разных форматов.

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

Чем переменные CSS отличаются от переменных Sass?

Переменные Sass и переменные CSS — это два разных вида, каждый из которых имеет свои достоинства и недостатки.
Переменные Sass могут быть эффективнее организованы

Из-за популярности Sass и более программной природы этого языка, со временем мы получили более глубоко структурированные формирования. Мне особенно нравятся карты Sass и объединение в картах переменных различных типов. В такие карты довольно часто включаются цвета, размеры и ярлыки для путей.

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

Переменные CSS могут быть изменены динамически

Переменные CSS обрабатываются браузером динамически во время выполнения, тогда как переменные Sass используются при компиляции CSS.

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

Переменные CSS — это стандартная функция для браузера

Я лично считаю, что чем больше вещей мы сейчас сможем удалить из Webpack, Gulp или любого другого нового фреймворка, тем лучше. Поддержка интересных новых функций в браузерах означает, что нам не нужно полагаться на компиляцию и JavaScript-фреймворки, чтобы сделать вещи, которые, по мнению разработчиков, важны. Я бы рискнул предположить, что высокий процент front-end разработчиков так или иначе использует переменные в своих CSS-стилях, поэтому использовать CSS-переменные, как функцию ядра, кажется разумными. Это означает, что на этапе построения (который, я думаю, все с этим согласятся, и так становится все более и более сложным) будет на один процесс меньше, а целом все станет более согласованным.

Какова ситуация с поддержкой?

С поддержкой браузерами в целом все выглядит замечательно с одним вопиющим исключением: IE 11. Большинство современных браузеров поддерживают переменные CSS, а Edge с несколькими ошибками.

Во всяком случае это на 78.11% выше, чем для CSS Grid (на момент написания статьи). Но поддержка в IE11 может стать проблемой.

Так можем ли мы собственно использовать переменные CSS?

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

Это не значит, что мы можем забыть о поддержке старых браузеров. Следует предусматривать основную резервную систему с использованием поддерживаемых тегов или даже полифиллов для старых браузеров, тем более, если фактическое отображение сайта в старых браузерах сильно искажено.

Это невероятное время для front-end разработчиков, и я не могу дождаться, когда приступлю к использованию этих новых технологий в своих рабочих проектах.

Автор: Adam Hughes

Источник: //www.webdesignerdepot.com/

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

Комментарии Вконтакте: