Популярно, доступно, полезно

CSS переменные — практические советы по работе


Содержание

Вступление

В последнее время я довольно много игрался с css переменными и подумал, что мог бы поделиться несколькими советами по созданию стратегии по их интеграции в мой рабочий процесс.

Типы CSS-аргументов

При работе с CSS аргументами часто может быть полезным думать о них, как о двух разных типах:

Первичные пользовательские свойства

Это свойство, которое вы можете изменять в разных селекторах, в медиа-запросах или с помощью псевдо-селекторов :hover или :focus или, например, с помощью JavaScript. Обычно она содержит одно значение:


: root {
--wrapper: 900px;
--guter: 10px;
}

Вторичные пользовательские свойства

Это аргументы, которые вычисляются из других. Например, в коде ниже размер ячейки сетки(grid) --rowHeight — вычисляется из нескольких первичных. Результат вычисления применяется к свойству, но никогда не обновляется вручную — только пересчитывается в результате изменения первичных CSS переменных.

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


:root {
--wrapper: 900px;
--guter: 10px;
/ *
s-префикс обозначает вторичное пользовательское свойство
* /
--s-rh:calc((var(--wrapper)-(3*var(--guter)))/4);
}

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

Область видимости

Во моих примерах я объявляю CSS переменные в :root, который представляет собой элемент <html>:


:root {
---bgColor: red;
}

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

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


.my-component {
---bgColor: red;
}
.some-other-component {
---bgColor: blue;
}

В вышеприведенном фрагменте кода -bgColor привязан к каждому компоненту, поэтому вы можете использовать переменную с тем же именем, не опасаясь, что это повлияет на что-либо вне этого компонента.

Установка величин по умолчанию

С помощью CSS переменных вы можете установить величину(или несколько величин) по умолчанию. Это означает, что в некоторых ситуациях вам нужно только объявить свои переменные в той точке, в которой они должны измениться. В коде ниже CSS переменная -bgColor для поля объявляется только при достижении ширины в 40em — до этого она принимает значение по умолчанию(red):

See the Pen CSS Variable default values by Michelle Barker (@michellebarker) on CodePen.

В этом втором примере вы можете видеть, что селекторы h1 и p имеют разные величины по умолчанию для своего свойства цвета, но оба принимают переменную при наведении:

See the
Pen CSS Variable with defaults by
Michelle Barker (@michellebarker) on CodePen.

Использование пользовательских свойств с препроцессорными

Один из недостатков CSS-аргументов — они не работают в медиа-запросах или псевдоклассах, например :nth-child(var(-n)) не будет работать. Поэтому, скорее всего, вы все равно захотите использовать препроцессорные аргументы.

Я бы предостерег от смешивания этих двух типов пользовательских свойств, если вы не полностью понимаете их отличия. Аргументы Sass скомпилируются до того, как ваш код попадает в браузер, тогда как в CSS они не получат вычисленное значение, пока не попадут в браузер. Это означает, что в приведенном ниже коде величина ширины для .box1 будет работать, но .box2 выдает ошибку, потому что величина для -halfWidth передается браузеру в виде строки:


$width: 600px;
$halfWidth: $width/2;
:root {
--halfWidth: $width/2;
}
.box1 {
ширина: $halfWidth;
}
.box2 {
width: var(--halfWidth); // это некорректно
}

Однако вы можете использовать calc(), как в предыдущих примерах. Смотрите результат в ниже:

See the Pen Preprocessor variable with CSS
Variables
by Michelle Barker (@michellebarker) on CodePen.

Если вы проинспектируете элемент в консоли Chrome и перейдете на вкладку «Вычисляемые стили»(Computed Styles), вы увидите, что значение ширины для .box2 не вычисляется. В нашей компании мы используем много функций Sass, например, для вычисления rem из пикселей при определении размера. Я обнаружил, что это оказалось проблемой, когда я попытался передать функцию Sass в аргумент CSS, например, --width: rem (600px). Есть плагин PostCSS, который может преобразовывать пиксели в rem чтобы достичь желаемого результата, но мне нужно будет немного поэкспериментировать с ними, прежде чем я буду уверенно рекомендовать их использовать с CSS переменными.

Тем не менее, существуют сценарии, в которых использование препроцессорных и CSS переменных в одном блоке кода вместе имеет смысл, например, в медиа-запросах, как упоминалось ранее.

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

See the Pen Visualising breakpoints with CSS
Variables
by Michelle Barker (@michellebarker) on CodePen.


Перевод статьи «Practical tips for working with CSS variables»

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *