Топ 5 причин, почему мне нравятся пользовательские свойства CSS

Привет, Хабр! Представляю вашему вниманию перевод статьи «My top 5 reasons why I like CSS custom properties», автора Stas Melnikov

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

Что такое пользовательские свойства CSS?

Вкратце, пользовательские свойства CSS – это свойства, которые были созданы разработчиком. Браузер ничего о них не знает, пока разработчик их не определит.

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

Например, я создал – свойство melnik909BrandColor, со значением purple для элемента button:

button {   --melnik909BrandColor: purple; }

Функция var

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

Для этого я должен определить свойство CSS и добавить значение этого свойства, там же установить функцию var с пользовательским свойством в качестве аргумента.

К примеру, я добавил свойство —melnik909BrandColor для свойств границы и цвета.

button {   --melnik909BrandColor: purple;   color: var(--melnik909BrandColor);   border: 2px solid var(--melnik909BrandColor); }

Пользовательские свойства можно изменять прямо в браузере

Опытный читатель, который знает такие инструменты, как Sass или LESS может сказать: «Стас, почему я должен изучать пользовательские свойства CSS? Я знаю переменные Sass и этого для меня достаточно».

Внимание! Переменные Sass и LESS помогают организовать CSS так, чтобы разработчикам было проще поддерживать код. Например, я создал переменную $melnik909BrandColor в которой сохранил цвет:

$melnik909BrandColor: purple;  button {   color: $melnik909BrandColor;   border: 2px solid $melnik909BrandColor; }

После компиляции я увижу следующий код в браузере:

button {   color: purple;   border: 2px solid purple; }

На этом примере видно, что переменные Sass и LESS не находятся в браузере.

Вторая особенность пользовательский свойств CSS заключается в том, что они находятся в браузере. Таким образом, я могу поменять значения прямо там. Например, я могу поменять значение свойства —melnik909BrandColor для состояния выделения элемента button:

button {   --melnik909BrandColor: purple;   color: var(--melnik909BrandColor);   border: 2px solid var(--melnik909BrandColor); }  button:hover {   --melnik909BrandColor: #27ae60; }

Можно использовать пользовательские свойства CSS и медиа запросы вместе

Третья особенность пользовательских свойств CSS — их значения могут быть изменены с помощью медиа запросов. Например, я определяю свойство melnik909BrandColor, чтобы изменить цвет текста элемента body на разных устройствах.

body {   color: var(--melnik909BrandColor); }  @media (max-width: 768px) {    body {     --melnik909BrandColor: purple;   } }  @media (min-width: 769px) {    body {     --melnik909BrandColor: tomato;   } }

Функция calc и пользовательские свойства CSS

Бывают случаи, когда нам необходимо использовать функцию calc. К примеру, мне нравится использовать эту функцию, когда мне нужно посчитать количество элементов в строке:

.child {   width: calc(100% / 4); }  .child {   width: calc(100% / 3); }

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

.child {   width: calc(100% / var(--itemsNumber)); }

И определю значения в элемент parent:

.parent {   --itemsNumber: 5; }  /* or */  .parent {   --itemsNumber: 7; }

Настройка векторной графики

Существует 2 способа настройки векторной графики с помощью пользовательских свойств CSS.

В первом методе мы определяем атрибуты fill, stroke и stroke-width, и добавляем к ним пользовательские свойства CSS в качестве их значений.

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

<svg class="svg-with-attr" viewBox="0 0 55.867 55.867">   <path      stroke="var(--iconStroke)"      stroke-width="var(--iconStrokeWidth)"      fill="var(--iconFill)"      d="..."> </svg>

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

.svg-with-attr {   --iconFill: #eeeeee;   --iconStroke: #000000;   --iconStrokeWidth: 1px; }

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

Во втором методе, мы определяем пользовательские свойства CSS для свойств stroke, stroke-width и fill, используя правила CSS.

body {   --iconFill: #ffcc00;   --iconStroke: #000000;   --iconStrokeWidth: 2px; }  .svg-with-props {   stroke: var(--iconStroke);   stroke-width: var(--iconStrokeWidth);   fill: var(--iconFill); }